Layui如何监听checkbox复选框的状态变化-Layui教程-PHP中文网

必须使用 Layui 事件系统而非原生 change 事件监听复选框：表格内用 table.on('checkbox(filter)')，独立表单用 form.on('checkbox(filter)')，filter 值须与 lay-filter 完全一致，且各组件 filter 必须唯一。

直接监听原生 checkbox 的 change 事件完全无效

你写 $('input[type="checkbox"]').on('change', ...) 或给元素加 addeventlistener('change', ...)，基本不会触发。layui 把真实 <input> 隐藏了，用户点的是外层模拟的 <div class="layui-form-checkbox">，原生事件根本收不到。 <p>常见错误现象：<code>console.log 一句没输出、勾选后回调不执行、分页切换后监听彻底失效——全是因为监听对象错了。

必须用 Layui 自己的事件系统，不是 DOM 事件
表格内的复选框走 table.on('checkbox(filter)')
独立表单里的复选框走 form.on('checkbox(filter)')
filter 值必须和渲染时设置的 lay-filter 完全一致，大小写、空格都不能差

表格内复选框状态变化，只认 `table.on('checkbox(filter)')`

表格里带 {type: 'checkbox'} 的列，不能用 form.on，它压根不响应——因为表格内部的复选框是 lay-skin="primary" 渲染的，属于 table 模块管辖范围。

正确监听方式：

table.on('checkbox(userTable)', function(data) {
  if (data.type === 'all') {
    console.log('全选框被操作，当前状态：', data.checked);
  } else {
    console.log('某行被操作，数据：', data.data, '状态：', data.checked);
  }
});

data.type 在 Layui 2.8+ 是可靠的，但旧版本可能为空字符串，建议加兜底判断：!data.type || data.type === 'one'
data.data 是整行原始数据，不是 DOM 元素，别想用它改样式
别手动调 $(data.elem).prop('checked', ...)，Layui 内部已同步状态，改了也没用，还可能破坏渲染
需要统计当前页选中数量？直接调 table.checkStatus('userTable').data.length，别遍历 DOM

独立表单中 checkbox 状态变化，必须用 `form.on('checkbox(filter)')`

如果 checkbox 不在表格里，而是单独放在 <form></form> 中（比如筛选条件、配置开关），就得走 form 模块。

HTML 必须带 lay-filter：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

<input type="checkbox" name="sync" lay-filter="config-check" value="1">

JS 监听写法：

form.on('checkbox(config-check)', function(data) {
  console.log('被点击的元素：', data.elem);
  console.log('当前值：', data.value); // 注意：没设 value 时是 undefined
  console.log('是否勾选：', data.checked);
});

确保 layui.use(['form'], callback) 中执行，且 form.render() 已完成（动态插入的 checkbox 要补调）
区分全选框和子项，别只靠 data.value，加 name="selectAll" 或 data-type="all" 更稳
手动修改 checkbox 状态后（比如 JS 控制勾选），必须跟一句 form.render('checkbox')，否则 UI 不更新
需要半选（indeterminate）？data.elem.indeterminate = true 可以设，但会覆盖 Layui 默认样式，得自己写 CSS 修复