告别繁琐操作！Layui树形复选框实现多选与联动技巧

告别繁琐操作！Layui树形复选框实现多选与联动技巧

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。 项目地址: https://gitcode.com/GitHub_Trending/la/layui

你是否还在为实现树形结构的多选功能而头疼？当用户勾选父节点时子节点无法自动选中，或者取消子节点时父节点状态不同步？本文将带你使用Layui的树形复选框（Tree Checkbox）组件，轻松实现节点多选与父子联动效果，让权限管理、分类选择等场景的开发效率提升300%。读完本文你将掌握：基础复选框配置、父子节点联动逻辑、选中状态获取与设置、实战案例代码。

核心功能与应用场景

Layui树形复选框是Tree组件的扩展功能，通过简单配置即可实现多层级节点的勾选操作。核心应用场景包括：

• 权限管理系统中的角色权限分配
• 商品分类的多维度筛选
• 组织架构的部门/人员选择
• 文档目录的批量操作

官方文档：docs/tree/index.md

基础配置：3行代码开启复选框

要启用树形复选框功能，只需在Tree组件渲染时添加showCheckbox: true配置。以下是最小化实现代码：

<div id="demoTree"></div>

<script>
layui.use('tree', function(){
  var tree = layui.tree;
  tree.render({
    elem: '#demoTree',
    data: [{
      title: '父节点',
      id: 1,
      children: [{
        title: '子节点1',
        id: 101
      },{
        title: '子节点2',
        id: 102
      }]
    }],
    showCheckbox: true  // 关键配置：显示复选框
  });
});
</script>

父子联动：自动关联节点状态

Layui树形组件默认实现了两种联动逻辑：

1. 父节点选中：所有子节点自动勾选
2. 子节点部分选中：父节点显示半选状态
3. 子节点全取消：父节点自动取消选中

配置示例：

tree.render({
  elem: '#demoTree',
  data: [...],
  showCheckbox: true,
  oncheck: function(obj){  // 复选框点击事件
    console.log("节点ID:", obj.data.id);
    console.log("选中状态:", obj.checked);
  }
});

属性说明：docs/tree/detail/options.md

实战技巧：获取与设置选中状态

1. 获取所有选中节点

// 渲染时指定ID
tree.render({
  id: 'testTree',  // 实例唯一标识
  showCheckbox: true
});

// 按钮点击时获取
var checkedNodes = tree.getChecked('testTree');
console.log("选中节点:", checkedNodes);

2. 批量设置选中状态

// 勾选ID为101、103的节点
tree.setChecked('testTree', [101, 103]);

完整演示代码：docs/tree/detail/demo.md

高级应用：自定义样式与交互

修改复选框颜色

通过重写CSS变量自定义选中样式：

:root {
  --layui-tree-checkbox-checked-color: #1E9FFF; /* 自定义选中颜色 */
}

禁用特定节点

在数据源中添加disabled: true属性：

{
  title: '禁选节点',
  id: 99,
  disabled: true  // 禁用复选框
}

常见问题解决方案

问题场景	解决方案	参考文档
取消父子联动	设置showCheckbox: {linkage: false}	options配置
获取半选状态节点	使用tree.getChecked('id', {type: 'all'})	API文档
动态加载数据	结合tree.reload()方法	重载示例

完整案例代码

以下是商品分类多选功能的完整实现：

<div class="layui-btn-container">
  <button class="layui-btn" id="getChecked">获取选中分类</button>
</div>
<div id="categoryTree" style="width: 300px; margin: 20px;"></div>

<script>
layui.use(['tree', 'layer'], function(){
  var tree = layui.tree;
  var layer = layui.layer;
  
  // 模拟分类数据
  var categoryData = [
    {
      title: '电子产品',
      id: 1,
      children: [
        {title: '手机', id: 101, checked: true},
        {title: '电脑', id: 102, 
          children: [
            {title: '笔记本', id: 1021},
            {title: '台式机', id: 1022}
          ]
        }
      ]
    },
    {
      title: '生活用品',
      id: 2,
      children: [
        {title: '洗漱用品', id: 201},
        {title: '厨房用具', id: 202, disabled: true}
      ]
    }
  ];
  
  // 渲染树形组件
  tree.render({
    elem: '#categoryTree',
    data: categoryData,
    id: 'categoryTreeId',
    showCheckbox: true,
    onlyIconControl: true  // 仅允许图标控制展开
  });
  
  // 按钮点击事件
  document.getElementById('getChecked').onclick = function(){
    var checked = tree.getChecked('categoryTreeId');
    var names = checked.map(item => item.title).join(',');
    layer.alert('选中分类: ' + names);
  };
});
</script>

总结与扩展

Layui树形复选框组件通过简洁的API设计，降低了复杂树形交互的实现难度。核心优势包括：

• 零依赖原生实现
• 自动父子联动
• 丰富的事件回调
• 灵活的样式定制

建议结合Layui的Form组件实现更复杂的表单提交逻辑，或使用Table组件展示选中结果。更多高级用法可参考：

• 树形表格组件：docs/treeTable/index.md
• 拖拽排序扩展：examples/tree.html

掌握这些技巧后，你可以轻松应对各类树形选择场景，让前端开发效率倍增！如果觉得本文有用，别忘了点赞收藏，关注作者获取更多Layui实战教程。

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。 项目地址: https://gitcode.com/GitHub_Trending/la/layui