Thymeleaf 动态复选框☑️实现

实现效果
服务端动态添加标签，其中标签是复选框中的选项

HTML端的代码

        <div class="form-group">
            <label class="col-sm-3 control-label">已选标签：</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>

服务端代码

 @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", "选项1");
        objects.add(tag1);
        HashMap<String, java.io.Serializable> tag2 = new HashMap<>(2);
        tag2.put("id", 2);
        tag2.put("tagName", "选项x");
        objects.add(tag2);
        mmap.put("tagList", objects);
        return PREFIX + "/add";
    }

实现的效果如下图：

checkbox3.png

标签名称没有转换过来。
于是对HTML代码进行如下优化

       <div class="form-group">
          <label class="col-sm-3 control-label">已选标签：</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