3分钟掌握Layui树形复选框：从入门到精通的多选联动技巧-开发者社区

3分钟掌握Layui树形复选框：从入门到精通的多选联动技巧

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

你是否曾经在为权限管理系统设计树形菜单时感到困扰？当用户需要勾选多个层级节点时，传统的单选模式往往显得力不从心。😅 别担心，Layui的树形复选框功能正是为你解决这一痛点而生！

在今天的Web开发中，树形结构的多选功能已经成为权限分配、商品分类、组织架构管理等场景的标配需求。通过简单的配置，你就能实现父子节点间的智能联动，让用户操作体验大幅提升。📈

应用场景：你的业务需要树形复选框吗？

在日常开发中，以下场景常常需要树形复选框的支持：

权限管理系统：管理员需要为角色分配多级菜单权限，勾选父节点时自动选中所有子节点，取消子节点时父节点智能调整状态。

商品分类筛选：电商平台中用户可能需要同时选择多个品类的商品，比如同时选择"手机"和"电脑"两个大类。

组织架构选择：企业OA系统中，需要选择某个部门下的所有员工，或者跨部门选择多个人员。

文档目录管理：批量操作文档目录时，需要快速选中多个相关章节。

核心配置：一行代码开启多选功能

想要启用树形复选框？其实简单得超乎想象：

tree.render({ elem: '#treeDemo', data: [/* 你的数据 */], showCheckbox: true // 就是这行代码！ });

这就是全部了！只需将showCheckbox属性设为true，你的树形组件就会自动显示复选框，让用户能够进行多选操作。

智能联动：父子节点的默契配合

Layui树形复选框最强大的功能之一就是自动的父子联动逻辑：

✅全选效应：勾选父节点时，所有子节点自动跟随选中
⚡智能反馈：部分子节点选中时，父节点显示半选状态
🔄状态同步：取消所有子节点时，父节点自动取消选中

tree.render({ // ... 其他配置 oncheck: function(obj) { console.log("节点ID:", obj.data.id); console.log("选中状态:", obj.checked); // 这里可以添加你的业务逻辑 });

实战操作：获取与设置选中状态

获取用户选择

当用户完成勾选后，你可以轻松获取所有被选中的节点：

// 渲染时指定ID便于后续操作 tree.render({ id: 'myTree', // 关键：给实例命名 showCheckbox: true }); // 获取选中节点 var selectedNodes = tree.getChecked('myTree');

预设选中状态

在某些场景下，你可能需要预先设置某些节点为选中状态：

// 批量勾选ID为101和103的节点 tree.setChecked('myTree', [101, 103]);

样式定制：让你的树形组件与众不同

想要让树形复选框更符合你的产品风格？没问题！

自定义选中颜色

:root { --layui-tree-checkbox-checked-color: #FF6B6B; /* 自定义主题色 */ }

禁用特定节点

某些节点可能不需要被选择，比如系统内置的管理员角色：

{ title: '超级管理员', id: 99, disabled: true // 这个节点将无法被勾选 }

完整实现案例

下面是一个完整的商品分类选择器实现：

<!-- 操作按钮 --> <div class="layui-btn-container"> <button class="layui-btn" id="getSelection">获取选中分类</button> </div> <!-- 树形容器 --> <div id="categoryTree" style="margin: 20px;"></div> <script> layui.use(['tree', 'layer'], function(){ var tree = layui.tree; var layer = layui.layer; // 分类数据 var categories = [ { 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: categories, id: 'categoryTree', showCheckbox: true }); // 获取选中结果 document.getElementById('getSelection').onclick = function(){ var selected = tree.getChecked('categoryTree'); var names = selected.map(item => item.title).join('、'); layer.msg('已选择: ' + names); }; }); </script>

常见问题快速解答

使用场景	解决方案	效果
需要取消父子联动	设置`showCheckbox: {linkage: false}`	节点独立选择
获取半选状态节点	使用`tree.getChecked('id', {type: 'all'})`	完整状态信息
动态更新数据	结合`tree.reload()`方法	实时刷新显示