Layui tree节点标题点击不触发复选框是设计使然，需通过事件委托监听.title并调用tree.setChecked()实现勾选；直接操作checkbox会破坏状态机、中断联动且不触发oncheck。
tree节点标题点击不触发复选框的默认原因
layui tree 组件默认只响应复选框（.layui-form-checkbox）自身的点击，节点标题（title 文本）点击是纯展示行为，不会联动勾选。这不是 bug，而是设计如此——避免误操作，也留给开发者自定义交互空间。
用 oncheck + 标题区域事件委托实现点击标题即勾选
核心思路：监听树容器内所有节点标题的 click，手动调用 tree.setChecked() 触发状态变更，并确保 oncheck 回调仍能正常捕获该行为。
- 必须在
tree.render()完成后、DOM 渲染完毕再绑定事件，推荐放在done回调或setTimeout(..., 0)微任务中 - 标题元素选择器用
.layui-tree-txt（Layui 2.8+）或.layui-tree-txt > span（旧版），避免误匹配子节点图标 - 点击时需向上查找最近的节点 DOM，并提取其
data-id——这个 id 必须和你 data 数组中节点的id字段严格一致 - 调用
tree.setChecked('yourTreeId', [idValue])，传入字符串数组，即使只设一个也要包成数组
示例片段：
tree.render({
elem: '#dept_tree',
data: treeData,
showCheckbox: true,
id: 'deptTree',
oncheck: function(obj) {
console.log('实际选中:', obj.data.id, obj.checked);
}
});
// 等待渲染完成
setTimeout(() => {
$('#dept_tree').on('click', '.layui-tree-txt', function(e) {
const $node = $(e.currentTarget).closest('.layui-tree-node');
const nodeId = $node.data('id');
if (nodeId != null) {
tree.setChecked('deptTree', [String(nodeId)]);
}
});
}, 0);
为什么不能直接操作 checkbox DOM？
直接用 $('input[type="checkbox"]') 手动 .prop('checked', true) 会破坏 Layui 内部状态机：
- UI 样式（如半选图标
layui-icon-triangle-r）不会更新 -
oncheck回调完全不触发，后续逻辑（如权限同步、按钮启用）全部失效 - 父子联动中断：父节点不会因子节点“被 JS 强点”而自动半选/全选
- 多棵树共存时，
tree.setChecked()是唯一受控入口，它会触发完整状态重算
容易忽略的兼容性细节
不同 Layui 版本对节点 DOM 结构有差异，.layui-tree-txt 在 2.7 之前可能嵌套更深，建议加容错：
- 不要依赖固定层级，用
.closest('.layui-tree-node')向上找最稳 -
data-id值必须是字符串类型（哪怕原始数据是数字），否则setChecked匹配失败 - 若节点无
id字段（比如后端返回漏了），$node.data('id')返回undefined，必须判空跳过 - 禁用节点（
spread: false, disabled: true）不应响应点击，加if (!$node.hasClass('layui-tree-disabled'))过滤
真正麻烦的不是加一行勾选逻辑，而是让点击标题这件事，在父子联动、半选计算、回调通知、禁用态处理这些环节里，和原生复选框点击表现完全一致——这要求你始终走 tree.setChecked() 这条路，别绕开。
