layui form怎么监听checkbox复选框的选中状态？-Layui教程-PHP中文网

layui复选框必须用form.on('checkbox(filtername)')监听，filtername需与lay-filter值严格一致；data.value仅返回当前操作项value，获取全部选中值需手动遍历dom；全选/反选须操作原生checked属性并调用form.render()同步ui。

layui form怎么监听checkbox复选框的选中状态？

form.on('checkbox(filterName)') 是唯一可靠监听方式

直接给 <input type="checkbox"> 绑原生 click 或 change 事件会失效——Layui 渲染后真实 input 被隐藏，UI 层是模拟的 div，原生事件根本触达不到。你点的是美化层，DOM 状态却没同步，data.elem.checked 拿到的可能是旧值。

必须用 form.on('checkbox(filterName)')，且 filterName 必须和 HTML 中 lay-filter="xxx" 的值**严格一致**（大小写、空格、符号都不能差）。这个事件由 Layui 内部事件代理触发，能穿透所有渲染场景：动态加载、分页重载、AJAX 刷新后都有效。

filterName 是 lay-filter 的值，不是 name，也不是 ID
监听必须在 layui.use(['form'], function() { ... }) 回调内注册，不能提前声明 form 实例
多个复选框区域共存时（如权限区 + 用户列表），每个区域要用不同的 lay-filter，否则一个勾选会触发全部回调

data.value 只反映当前操作项，不是全部选中值

data.value 是当前被点击的那个 checkbox 的 value 属性值，不是整组选中的集合。常见错误是以为 data.value 就是“这次选中的值”，结果全选时它为 undefined（因为全选框通常不设 value），单选取消时它还是上一次的值。

要获取全部已勾选的值，得手动查 DOM：

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

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

下载

form.on('checkbox(userRoles)', function(data) {
  var checkedValues = [];
  $('input[name="userRoles"]:checked').each(function() {
    checkedValues.push(this.value);
  });
  console.log(checkedValues); // ['admin', 'editor']
});

name="userRoles" 是表单字段名，必须和所有目标 checkbox 的 name 属性一致
不能依赖 form.val('formFilter') 批量取值——它对复选框只返回最后一个操作项的值，不是数组
如果 checkbox 是动态生成（如弹窗里插入的），确保先执行 form.render('checkbox') 再绑定监听

全选/反选逻辑别硬设 prop，要操作原生 checked 属性

全选按钮本身也是 checkbox，它的 lay-filter 和子项 name 通常不同。监听时拿到 data.elem.checked，然后遍历子项并赋值 item.checked = data.elem.checked，最后调用 form.render('checkbox') 同步 UI。

千万别用 $('input[name="xxx"]').prop('checked', true) —— 这只改 DOM 属性，Layui 渲染层感知不到，UI 和内部状态会脱节，后续 form.val() 或校验可能出错。

子项定位推荐按 name（如 input[name="userIds[]"]）或加特定 class（如 .role-check），避免全局 input[type="checkbox"] 误伤
反选逻辑写成 item.checked = !item.checked，而不是先全清再重设，减少 DOM 操作次数
反选按钮建议用普通 <button type="button"></button>，不要也做成 type="checkbox"，语义混乱且易和全选逻辑冲突