应使用 layui.form.on('checkbox(filterName)') 监听，全选框需加 lay-filter 属性；通过 data.elem.name 区分全选/子项；同步状态后须调用 form.render('checkbox')；半选状态需手动设置 indeterminate 并配合 CSS 修复。
如何用 layui.form.on 监听 checkbox 全选框状态变化
直接监听全选框（比如 class="layui-form-checkbox" 里的主 checkbox）本身是无效的，因为 layui 的 checkbox 是通过 js 动态渲染的 dom，原生 change 事件不会触发。必须走 layui 自己的表单监听机制。
正确做法是：给全选框加上 lay-filter 属性，再用 form.on('checkbox(filterName)') 绑定事件。
- 全选框 HTML 必须写成：
<input type="checkbox" name="selectAll" lay-filter="select-all"> - 监听代码要放在
layui.use(['form'], ...)回调里，且确保form.render()已执行（通常初始化后自动 render，但手动添加的 DOM 需补调） - 回调函数中，
data.elem是被点击的 checkbox 元素（可能是全选框，也可能是子项），data.value是它的value值（注意：全选框若没设value，data.value会是undefined）
怎么区分点击的是全选框还是普通子项
仅靠 data.elem 的 name 或 value 不够可靠，推荐用 DOM 属性或类名做判断。
- 给全选框加唯一标识，比如
id="check-all"或data-type="all"，在回调里用data.elem.id === 'check-all'判断 - 子项统一用
name="item"，全选框用name="selectAll"—— 这样可用data.elem.name === 'selectAll'区分 - 避免只依赖
data.value，因为未设置 value 的 checkbox 点击时data.value是空字符串或undefined，容易误判
监听后同步子项状态却失效？常见原因在这儿
手动修改子项的 checked 属性后，Layui 的 UI 不会自动更新，看起来“勾上了但样式没变”。
- 必须调用
form.render('checkbox')强制重绘所有 checkbox 样式 - 如果子项是动态生成的（比如 AJAX 加载后插入），需在插入 DOM 后立刻调用
form.render('checkbox')，否则监听和渲染都失效 - 别用
$('input[name="item"]').prop('checked', true)后就结束——Layui 不认 jQuery 的 prop 操作，得用form.render()或触发其内部更新逻辑
全选逻辑里漏掉“半选”状态怎么办
Layui 原生不支持 checkbox 半选（indeterminate），但真实场景中，当部分子项被选中时，全选框应显示为“—”状态。这个得手动画出来，并绕过 Layui 的默认渲染控制。
- 用
document.getElementById('check-all').indeterminate = true设置半选，但要注意：这会覆盖 Layui 的 checkbox 样式，需配合 CSS 修复（比如隐藏 Layui 默认图标，用伪元素画“—”） - 每次子项变动后，统计已勾选项数量：
const checkedLen = $('input[name="item"]:checked').length，再和总数比对决定全选框是checked、indeterminate还是未勾 - 设置
indeterminate后，Layui 的form.on事件仍能捕获点击，但data.elem.checked会是false（浏览器行为），所以判断是否“点中全选”不能只看checked，得结合event.target和当前状态
半选不是锦上添花，而是用户对“当前选择范围”的关键视觉反馈；一旦忽略，操作意图就容易误读，尤其在数据量大或分页场景下。
