全选事件必须用form.on('checkbox(filterName)')监听，因Layui渲染后DOM与UI状态分离，原生click无法触发状态同步；需在layui.use回调中注册监听，lay-filter值须严格一致，子项定位推荐按name或class精准选择，操作原生checked属性而非.prop()，反选用item.checked=!item.checked，全选状态需手动联动判断。
全选事件必须用 form.on('checkbox(filterName)') 监听，不能绑原生 click
直接给全选 checkbox 写 $('#checkall').on('click', ...) 会失效——因为 layui 渲染后，真实 dom 和 ui 状态是分离的，原生 click 不触发 layui 的状态同步机制。你点下去了，data.elem.checked 拿不到正确值，form.render('checkbox') 也不会自动调用。
正确做法是：HTML 中写 <input type="checkbox" lay-filter="selectAll">，JS 中在 layui.use(['form'], function() { ... }) 回调里注册监听：
form.on('checkbox(selectAll)', function(data) {
const checked = data.elem.checked;
// 后续操作子项
});
注意：lay-filter 值必须和 form.on 里的字符串完全一致（大小写、空格、符号都不能错），且 form 实例必须在 layui.use 回调内获取，不能提前声明。
子项 checkbox 用 name 或 class 定位，别用 $('input[type="checkbox"]') 全局查
表格里多个复选框区域共存时，全局查容易误操作。比如表头全选按钮和权限配置区的 checkbox 都用 type="checkbox"，一动就全崩。
- 推荐按
name区分：input[name="userIds[]"]对应用户列表，input[name="perms[]"]对应权限项 - 或统一加 class：
class="user-check"，再用$('.user-check')精准定位 - 表格场景下更稳妥：
$(data.elem).closest('table').find('tbody input[type="checkbox"]')，避免跨表干扰
定位到元素后，直接操作原生 item.checked = true/false，而不是 .prop('checked', ...)——前者触发浏览器原生状态变更，Layui 能感知；后者只改属性，UI 不刷新。
反选逻辑要逐个取反，不是先清再全设
常见错误写法：$('.child').prop('checked', false).prop('checked', true)，这会导致两次重绘、性能差，且中间状态可能被用户看到。
正确反选只需一行核心逻辑：
child.each(function(index, item) {
item.checked = !item.checked; // 直接取反
});
form.render('checkbox');
注意：反选按钮本身不能是 type="checkbox"，得用普通 <button>。否则它自己也会参与「全选状态联动」，造成逻辑混乱，比如点一次反选，全选框也跟着 toggle。
取消全选/单个取消影响全选状态，得手动同步
当用户手动取消某个子项时，全选框应自动取消勾选；当所有子项又被勾上，全选框才恢复勾选。这个联动不是 Layui 自带的，必须自己判断。
监听子项事件：form.on('checkbox(childItem)', ...)，然后检查所有子项状态：
- 遍历所有子项 DOM 元素，用
item.checked === false判断是否有未勾选项 - 发现一个未勾选，就
$('#selectAll')[0].checked = false并form.render('checkbox') - 若全部为
true，再把全选框设为true
关键点：不要依赖 jQuery 的 .prop() 去读状态，要用原生 item.checked，因为 Layui 可能尚未同步 jQuery 属性。
最易忽略的是 DOM 生成时机——表格数据是异步加载的，done 回调里去 $().prop('checked', true) 会失败，因为此时 checkbox 还没渲染出来。默认选中必须靠后端返回数据里带 checked: true 字段（小写，非 LAY_CHECKED），Layui 才会在渲染时自动打钩。
