【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發送給后台