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

未结贴
4 293
选择一级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');
});
空闲广告位,联系:xianxin@layui.com
  • LYChao LYChao
    2017-03-21 13:09:44
    这个需求最近我也在做,目前官方没有提供便捷方法,希望下个版本能有新进展
    0 回复
  • Esofar Esofar
    2017-03-21 13:30:23
    可以用其他插件实现啊,比如ztree。
    0 回复
  • 学习ing 学习ing
    2017-03-21 17:58:30
    @LYChao 你现在是怎么实现的啊
    0 回复
  • LYChao LYChao
    2017-03-22 08:53:22
    @学习ing 这块不是紧急功能,所以先跳过了,暂时一个一个点啦[偷笑]
    0 回复
最近热帖
完全基于 layui 开发的后台管理模板 2677
三层导航怎么做? 627
「源码市场」 正式版本上线 基于layui开发 562
2.0啥时候出啊,新项目要启动了 500
给2.0一些期待 435
麻烦朋友们投个票呗,FLY社区模板+thinkphp5驱动+个人DIY 371
layui整合datatable了么 311
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 270
form.render('select') 更新渲染问题 238
select 动态操作不起作用,求助 199
近期热议
完全基于 layui 开发的后台管理模板 35
layui富文本编辑器图片上传无法回显 15
表单校验无效,找了好长时间找不到原因,求大神看下 14
select 动态操作不起作用,求助 10
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 10
这个社区的完整源码能不能共享 10
给2.0一些期待 9
如何给弹出层传参数? 8
文本编辑器出不来 8
laytpl不解析 8