<link rel="stylesheet" href="G:/www/Taole/public/static/admin/layui/css/layui.css" media="all">
<body>
<script src="G:/www/Taole/public/static/admin/layui/layui.js"></script>
<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);