layui checkbox 父级子级级联

最新推荐文章于 2024-02-06 09:42:13 发布

一定有人改了我的代码

最新推荐文章于 2024-02-06 09:42:13 发布

阅读量2.5k

点赞数 2

分类专栏： layui 文章标签： layui checkbox 父子联动设置权限

本文链接：https://blog.csdn.net/qq_42057516/article/details/92003366

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面代码只需要在页面上引入jquery和layui.js和layui.css即可跑起来

<body>
    <script type="text/javascript">
        //需要引入的模块
        layui.use(['table','form','jquery'], function() {
            var form = layui.form,
            table = layui.table,
            $=layui.jquery;
        
             form.on('checkbox()', function(data){
                        var pc =  data.elem.classList //获取选中的checkbox的class属性
                        
                        /* checkbox处于选中状态  */
                        if(data.elem.checked==true){//并且当前checkbox为选中状态
                                /*如果是parent节点 */
                                if(pc=="parent"){  //如果当前选中的checkbox class里面有parent
                                    //获取当前checkbox的兄弟节点的孩子们是 input[type='checkbox']的元素
                                    var c =$(data.elem).siblings().children("input[type='checkbox']");
                                     c.each(function(){//遍历他们的孩子们
                                        var e = $(this); //添加layui的选中的样式   控制台看元素
                                        e.next().addClass("layui-form-checked");
                                   });
                                }else{/*如果不是parent*/
                                    //选中子级选中父级
                                    $(data.elem).parent().prev().addClass("layui-form-checked");
                                }
                            
                        }else{    /*checkbox处于 false状态*/
                               
                              //父级没有选中 取消所有的子级选中
                              if(pc=="parent"){/*判断当前取消的是父级*/
                                var c =$(data.elem).siblings().children("input[type='checkbox']");
                                 c.each(function(){
                                    var e = $(this);
                                    e.next().removeClass("layui-form-checked")
                                 });
                              }else{/*不是父级*/
                                      
                                    var c = $(data.elem).siblings("div");
                                    var count =0;
                                      c.each(function(){//遍历他们的孩子们
                                             //如果有一个==3那么久说明是处于选中状态
                                              var is =  $(this).get(0).classList;
                                              if(is.length==3){
                                                  count++;
                                              }
                                      });
                                     //如果大于0说明还有子级处于选中状态
                                     if(count>0){
                                         
                                     }else{/*如果不大于那么就说明没有子级处于选中状态那么就移除父级的选中状态*/
                                         $(data.elem).parent().prev().removeClass("layui-form-checked");
                                     }
                              }
                        }
            });      
    
        });

        </script>
        
        <div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">
        
            <div class="layui-form-item" id="test">
                <label class="layui-form-label">权限范围</label>
                
                
                 <ul class="layui-input-block" style="margin-top: 10px ;">
                     <li>
                         <input type="checkbox" class="parent"  lay-skin="primary" title="人事模块">
                         <ul>
                             <input type="checkbox" name="limits[]" lay-skin="primary" title="社区系统">
                            <input type="checkbox" name="limits[]" lay-skin="primary" title="用户" >
                            <input type="checkbox" name="limits[]" lay-skin="primary" title="角色">
                            <input type="checkbox" name="limits[]" lay-skin="primary" title="评论审核">
                         </ul>
                     </li>
                 </ul>
                
                  <ul class="layui-input-block" style="margin-top: 10px ;">
                     <li>
                         <input type="checkbox"  class="parent" name="limits[]" lay-skin="primary" title="人事模块">
                         <ul>
                             <input type="checkbox" name="limits[]" lay-skin="primary" title="社区系统">
                            <input type="checkbox" name="limits[]" lay-skin="primary" title="用户" >
                            <input type="checkbox" name="limits[]" lay-skin="primary" title="角色">
                            <input type="checkbox" name="limits[]" lay-skin="primary" title="评论审核">
                         </ul>
                     </li>
                 </ul>
                
                  <ul class="layui-input-block" style="margin-top: 10px ;">
                     <li>
                         <input type="checkbox"  class="parent"  name="limits[]" lay-skin="primary" title="人事模块">
                         <ul>
                             <input type="checkbox" name="limits[]" lay-skin="primary" title="社区系统">
                            <input type="checkbox" name="limits[]" lay-skin="primary" title="用户" >
                            <input type="checkbox" name="limits[]" lay-skin="primary" title="角色">
                            <input type="checkbox" name="limits[]" lay-skin="primary" title="评论审核">
                         </ul>
                     </li>
                 </ul>

            </div>
        </div>
    </body>

//获取选中的checkbox的值
var mId = "";
var e =iframeWindow.$(":checkbox");
e.each(function () {
   if($(this).next().hasClass("layui-form-checked")){
      mId+=$(this).val()+",";
   };
})
mId = mId.substring(0,mId.length-1);