美文网首页
Thymeleaf 动态复选框☑️实现

Thymeleaf 动态复选框☑️实现

作者: 秋元_92a3 | 来源:发表于2020-01-29 11:13 被阅读0次

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

    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

    相关文章

      网友评论

          本文标题:Thymeleaf 动态复选框☑️实现

          本文链接:https://www.haomeiwen.com/subject/juevthtx.html