【JSP】layui+jsp，根据后台数据给复选框默认勾选

1.项目中经常使用复选框，当重复加载，就需要从数据库给复选框一个默认的值了。

2.接下来使用的是JSP中迭代的方法，给复选框绑定值。思路和方法不一定好，仅供参考。

<input type="checkbox" class="layui-form-checkbox" id="${menu.menu_code}" value="${menu.menu_id}" lay-skin="primary" data-id='${menu.menu_id}'/></td>

我是用的是input标签中的checkbox，复选框。

给input绑定id用来实现勾中方法。

<c:forEach var="model" items="${maps.menuData}" varStatus="varStatusName"> 
        var code=$("#${model.menu_code}").prop("checked",true); //给复选框打勾
       console.log(${model.menu_code});
</c:forEach>

//使用jsp标准库JSTL，可能需要导入包
//foreach类似于循环，将menu_code循环使用prop方法
//来给input绑定 checked方法

以上<c:forEach>基础迭代标签，接受多种集合类型。

即循环id，给input复选框绑定勾中方法。

以下是js完整代码

<script>
    $(function() {

        <c:forEach var="model" items="${maps.menuData}" varStatus="varStatusName">
        var code=$("#${model.menu_code}").prop("checked",true); //给复选框打勾
       console.log(${model.menu_code});
        </c:forEach>
        });

        layui.use(["jquery", "upload", "form", "layer", "element"], function () {
            var $ = layui.$,
                element = layui.element,
                layer = layui.layer,
                upload = layui.upload,
                form = layui.form;
          //自定义验证规则
          form.verify({
            nikename: function(value){
              if(value.length < 5){
                return '昵称至少得5个字符啊';
              }
            }
            ,Hours: [/^[0-9_\u4e00-\u9fa5\\s·]+$/, '小时数只能是数字']
          });


 
    /*        form.on('select(roleName)', function(data){
                var grade =data.value;
                var code=document.getElementById("role_code");
                code.value=grade;
 /!*               console.log(data.elem); //得到select原始DOM对象*!/
             console.log(data.value); //得到被选中的值
 /!*                console.log(data.othis); //得到美化后的DOM对象*!/
            });
            该备注方法是监听下拉框roleName，选中给role_code绑定value
*/
          //监听提交
          form.on('submit(add)',function (data) {
              //获取所有的input标签
              var input = document.getElementsByTagName("input");
              var str="";
              for (var i = 0; i < input.length; i++)
              {
                  var obj = input[i];
                  //判断是否是checkbox并且已经选中
                  if (obj.type == "checkbox" && obj.checked)
                  {
                      var code = obj.value;//获取checkbox的值
                      str=str+code+",";
                  }
              }
              console.log(str);
                var role_code = $('#role_code').val();
                var role_menu = {
                    Role_Id: role_code,
                    Menu_Id: str
                };
                $.ajax({
                    url: "/CMS/Role_Menu/AddRole_Menu",
                    type: "post",
                    data: role_menu,
                    success: function (res) {
                        if (res == 'true') {
                            layer.alert("增加成功", {icon: 6}, function () {
                                // 获得frame索引
                                window.parent.location.reload();
                                var index = parent.layer.getFrameIndex(window.name);
                                //关闭当前frame
                                parent.layer.close(index);
                                window.location.reload();
                            });
                        } else {
                            layer.msg('添加失败', {icon: 6});
                        }
                    }
                });
                return false;
          });
          });
    </script>

 

使用方法获取全部input 然后在使用方法筛选出选中的复选框value发送给后台