实现效果
服务端动态添加标签,其中标签是复选框中的选项
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
网友评论