请问这里如何实现一个checkbox tree?

提问 未结
6 799
学习ing
学习ing 2017-3-21
悬赏:5飞吻
选择一级checkbox时,就选择所有子级;选择二级checkbox时就全选了二级下面的子级和一级checkbox;选择二级下面的其中一个就默认选择 了二级checkbox和一级checkbox!
<div class="layui-input-block">
<!--主菜单-->
<input type="checkbox" name="" title="系统设置" lay-skin="primary" lay-filter="allChoose">
<div style="margin-left: 50px;" class="checked-box">
<!--二级菜单-->
<div class="checked2">
<input type="checkbox" name="" title="用户管理" lay-skin="primary" lay-filter="allChoose2">
<div style="margin-left: 50px;" class="checked-child">
<input type="checkbox" name="" title="添加用户" lay-skin="primary">
<input type="checkbox" name="" title="编辑用户" lay-skin="primary">
<input type="checkbox" name="" title="删除用户" lay-skin="primary">
</div>
</div>
<!--二级菜单-->
<div class="checked2">
<input type="checkbox" name="" title="角色管理" lay-skin="primary" lay-filter="allChoose2">
<div style="margin-left: 50px;" class="checked-child">
<input type="checkbox" name="" title="添加角色" lay-skin="primary">
<input type="checkbox" name="" title="编辑角色" lay-skin="primary">
<input type="checkbox" name="" title="删除角色" lay-skin="primary">
</div>
</div>

<!--二级菜单-->
<div class="checked2">
<input type="checkbox" name="" title="网关组管理" lay-skin="primary" lay-filter="allChoose2">
<div style="margin-left: 50px;" class="checked-child">
<input type="checkbox" name="" title="管理组" lay-skin="primary">
</div>
</div>
<!--二级菜单-->
<div class="checked2">
<input type="checkbox" name="" title="配置管理" lay-skin="primary" lay-filter="allChoose2">
<div style="margin-left: 50px;" class="checked-child">
<input type="checkbox" name="" title="添加配置" lay-skin="primary">
<input type="checkbox" name="" title="编辑配置" lay-skin="primary">
<input type="checkbox" name="" title="删除配置" lay-skin="primary">
</div>
</div>
</div>
</div>
form.on('checkbox(allChoose)', function(data){
var child = $(data.elem).parent('.layui-input-block').find('.checked-box :checkbox');
child.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox');
});

form.on('checkbox(allChoose2)', function(data){
// var child2 = $(data.elem).siblings('.checked-child').find(':checkbox');
var child2 = $(data.elem).parent('.checked2').find('.checked-child :checkbox');
child2.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox');
});
回帖
  • LYChao
    2017-3-21
    这个需求最近我也在做,目前官方没有提供便捷方法,希望下个版本能有新进展
    0 回复
  • Esofar
    2017-3-21
    可以用其他插件实现啊,比如ztree。
    0 回复
  • 学习ing
    2017-3-21
    @LYChao 你现在是怎么实现的啊
    0 回复
  • LYChao
    2017-3-22
    @学习ing 这块不是紧急功能,所以先跳过了,暂时一个一个点啦[偷笑]
    0 回复
  • 等风来
    2017-7-25
    我做了 但是 现在 有个问题
    sublime 的时候 有时候会出现 checkbox 漏提交
    0 回复
  • 等风来
    2017-7-25
    @贤心 你的checkout 点击 不是检测自身是否被选中吗 ?? 为什么 我修改选中了 点击它还是执行选中 说明 你的开关 不是在行内 检测应该是 js里的变量开关 对不???
    0 回复