實(shí)現(xiàn)效果
服務(wù)端動(dòng)態(tài)添加標(biāo)簽，其中標(biāo)簽是復(fù)選框中的選項(xiàng)

HTML端的代碼

        <div class="form-group">
            <label class="col-sm-3 control-label">已選標(biāo)簽：</label>
            <div class="col-sm-8">
                <label th:each="tag : ${tagList}" class="check-box">
                    <div class="checked" id="tag-item-${tag.id}" onclick="chargeTag(${tag.id})">
                        <input type="checkbox" th:value="${tag.id}"
                               style="position: absolute; opacity: 0;">
                        <ins class="iCheck-helper"
                             style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
                    </div>
                    ${tag.tagName}</label>
            </div>
        </div>

服務(wù)端代碼

 @GetMapping("/add")
    public String add(ModelMap mmap) {
        final ArrayList<Map<String, java.io.Serializable>> objects = new ArrayList<>(2);
        HashMap<String, java.io.Serializable> tag1 = new HashMap<>(2);
        tag1.put("id", 1);
        tag1.put("tagName", "選項(xiàng)1");
        objects.add(tag1);
        HashMap<String, java.io.Serializable> tag2 = new HashMap<>(2);
        tag2.put("id", 2);
        tag2.put("tagName", "選項(xiàng)x");
        objects.add(tag2);
        mmap.put("tagList", objects);
        return PREFIX + "/add";
    }

實(shí)現(xiàn)的效果如下圖：

checkbox3.png

標(biāo)簽名稱沒有轉(zhuǎn)換過來(lái)。
于是對(duì)HTML代碼進(jìn)行如下優(yōu)化

       <div class="form-group">
          <label class="col-sm-3 control-label">已選標(biāo)簽：</label>
            <div class="col-sm-8">
                <label th:each="tag : ${tagList}" class="check-box">
                    <div class="checked" id="tag-item-${tag.id}" onclick="chargeTag(${tag.id})">
                        <input type="checkbox" th:value="${tag.id}"
                               style="position: absolute; opacity: 0;">
                        <ins class="iCheck-helper"
                             style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
                    </div><text th:text="${tag.tagName}"></text>
                    </label>
            </div>
        </div>

效果如下

checkbox2.png