如何用 layui.form.on 监听 checkbox 全选框状态变化
直接去监听全选框本身的原生事件，往往是行不通的。为什么呢？因为 Layui 的复选框组件是经过 Ja vaScript 动态渲染的，你直接操作 DOM 元素上的 change 事件，很可能不会触发预期的回调。正确的路径，是遵循 Layui 自己的表单事件监听机制。
具体怎么做？关键在于两个步骤：首先，给全选框元素加上一个 lay-filter 属性，给它起个名字；然后，使用 layui.form.on('checkbox(filterName)') 这个方法来绑定事件监听。
- 全选框的 HTML 结构需要这样写：
- 监听代码必须包裹在
layui.use(['form'], function(){ var form = layui.form; ... })的回调函数里，并且确保表单已经渲染完成。通常初始化后 Layui 会自动渲染，但如果是后续手动添加到页面中的 DOM 元素，就需要额外调用一次form.render()。 - 在事件回调函数中，你会拿到一个
data对象。其中，data.elem指向被点击的那个复选框元素（可能是全选框，也可能是某个子项），而data.value则是该元素的value属性值。这里有个细节需要注意：如果全选框没有设置value属性，那么data.value的值会是undefined。
怎么区分点击的是全选框还是普通子项
在事件回调里，光靠 data.elem 的通用属性来区分点击源，有时并不够稳妥。更推荐的做法是，提前为不同类型的复选框打上明确的“标记”。
- 给全选框一个唯一的标识，比如设置
id="check-all"，或者自定义一个属性如data-type="all"。在回调函数里，就可以用data.elem.id === 'check-all'这样的条件进行判断。 - 另一种清晰的约定是：所有子项复选框使用统一的
name，例如name="item"，而全选框则使用不同的name，比如name="selectAll"。这样，直接判断data.elem.name === 'selectAll'就能知道是不是全选框被点击了。 - 尽量避免单纯依赖
data.value来做区分，因为对于那些没有显式设置value的复选框，点击时获取到的data.value可能是空字符串或者undefined，容易导致逻辑误判。
监听后同步子项状态却失效？常见原因在这儿
一个很常见的坑是：明明在代码里通过 Ja vaScript 修改了子复选框的 checked 属性，但页面上勾选的样式却没有同步更新。这其实不是逻辑错了，而是 Layui 的 UI 层没有及时刷新。
- 核心解决方案是：在修改完 DOM 的选中状态后，必须手动调用一次
form.render('checkbox')来强制重绘所有复选框的样式。 - 如果页面上的子项是动态生成的（比如通过 AJAX 请求数据后拼接插入到页面），那么务必在将 HTML 插入 DOM 之后，立即调用一次
form.render('checkbox')。否则，这些动态生成的复选框既无法响应事件，也不会显示正确的样式。 - 记住，不要用 jQuery 的
.prop('checked', true)方法操作完就觉得万事大吉了。Layui 内部并不直接监听这些原生属性变化，必须通过调用它的form.render()方法来触发其内部的更新逻辑。
全选逻辑里漏掉“半选”状态怎么办
Layui 的原生复选框组件并不支持“半选”（indeterminate）状态。但在实际业务中，当只有部分子项被选中时，全选框呈现一个“—”状态是非常必要的视觉反馈。要实现这个效果，需要一些手动的 DOM 操作和样式干预。
- 可以通过原生 Ja vaScript 设置半选状态：
document.getElementById('check-all').indeterminate = true。但要注意，这个操作会覆盖 Layui 为复选框绘制的默认图标，因此需要配合额外的 CSS 来修复样式，例如隐藏 Layui 默认的勾选图标，并用伪元素自行绘制一个“—”符号。 - 实现逻辑的核心是监听子项的变动。每次有子项被选中或取消时，都需要统计当前已勾选的数量：
const checkedLen = $('input[name="item"]:checked').length。然后，将这个数量与子项总数进行比较，从而决定全选框应该是“全选”（checked=true）、“半选”（indeterminate=true）还是“未选”（checked=false）。 - 设置了
indeterminate属性后，Layui 的form.on事件仍然可以捕获到对该全选框的点击。但是，此时data.elem.checked的值会是false（这是浏览器的标准行为）。因此，在判断用户是否“点击了全选框以进行全选操作”时，不能只看checked值，还需要结合事件目标（event.target）和全选框当前的实际状态来综合判断。
千万别小看这个“半选”状态，它绝非锦上添花。在数据量庞大或存在分页加载的场景下，它是用户理解“当前选择范围”的关键视觉线索。一旦缺失，用户的操作意图就很容易被误解，从而影响交互的准确性和效率。
