html代码
<div class="layui-form-item">
<label class="layui-form-label"><h3>系统权限</h3></label><hr>
<div class="layui-input-block">
@foreach($power_all as $k=>$v)
<div class="parent">
<input type="checkbox" lay-skin="primary" lay-filter="parent" name="like[]" value="{{$v['power_node_id']}}" title="{{$v['power_node_name']}}">
<div class="son">
@foreach($v['son'] as $kk=>$vv)
<input type="checkbox" lay-filter="son" lay-skin="primary" name="like[]" value="{{$vv['power_node_id']}}" title="{{$vv['power_node_name']}}">
@endforeach
</div>
</div>
@endforeach
</div>
</div>
layui的js代码
layui.use('form', function(){
var form = layui.form
$ =layui.jquery;
//监听父级
form.on('checkbox(parent)', function(data){
// console.log('parent'); //得到checkbox原始DOM对象
// console.log(data.elem.checked); //是否被选中,true或者false
// console.log(data.value); //复选框value值,也可以通过data.elem.value得到
//console.log(data.othis); //得到美化后的DOM对象
//添加一个父级选中找自级的方法
if(data.elem.checked==true){
data.othis.parent('.parent').find('.son input').prop('checked',true)
}else{
data.othis.parent('.parent').find('.son input').prop('checked',false)
}
//表格重构 因为添加属性时动态添加,所以需要重构一下
form.render()
});
//监听子级
form.on('checkbox(son)', function(data){
// console.log(data); //得到checkbox原始DOM对象
// console.log(data.elem.checked); //是否被选中,true或者false
// console.log(data.value); //复选框value值,也可以通过data.elem.value得到
// console.log(data.othis); //得到美化后的DOM对象
if(data.elem.checked==true){
data.othis.parents('.parent').find('input').first().prop('checked',true)
}else{
let make=false;
//实现取消子类节点checked时,若不是全部子类取消 父类不能取消
data.othis.parent('.son').find('input').each(function(){
// console.log($(this).prop('checked')) 打印返回结果是 选中是true 未选中是false
if(($(this).prop('checked')) == true){
make=true;
}
})
if (make==false){
data.othis.parents('.parent').find('input').first().prop('checked',false)
}
}
form.render()
});
});