必须用form.on('checkbox(filterName)')监听，filterName需与lay-filter值严格一致；data.value仅反映当前操作项，获取全部选中值须用$('input[name="xxx"]:checked')查DOM并提取value。
layui复选框怎么用 form.on('checkbox') 监听变化
layui 的复选框（type="checkbox"）本身不自动提交多值，必须靠监听事件或手动收集。直接用 form.val('formFilter') 只能拿到最后勾选/取消的那个值，不是全部选中项——这是最常见的误解。
正确做法是绑定 form.on('checkbox(filterName)') 事件，在回调里通过 DOM 状态实时判断哪些被勾选：
form.on('checkbox(userRoles)', function(data){
// data.elem 是当前触发的 checkbox 元素
// data.value 是该 checkbox 的 value 属性值（注意：不是所有选中的值！）
var checkedValues = [];
$('input[name="userRoles"]:checked').each(function(){
checkedValues.push(this.value);
});
console.log(checkedValues); // ['admin', 'editor']
});
-
userRoles是name属性值，不是 lay-filter 值；lay-filter 仅用于事件绑定，不参与数据收集 - 必须用
$('input[name="xxx"]:checked')查 DOM，不能只信data.value - 如果复选框是动态生成的（比如表格行内渲染），需确保事件委托生效，建议用
form.render('checkbox')重载后再监听
提交前用 form.val() 批量取值要注意 name 一致性
layui 的 form.val('formFilter') 能批量读取表单字段，但对复选框有硬性要求：所有同名复选框必须共享同一个 name，且不能混用其他类型控件（比如同名的 input[type=text] 会覆盖掉 checkbox 的值）。
示例 HTML 结构必须这样写：
<input type="checkbox" name="tag" value="js" lay-filter="tag"> JS<br> <input type="checkbox" name="tag" value="py" lay-filter="tag"> Python<br> <input type="checkbox" name="tag" value="go" lay-filter="tag"> Go
然后调用：
var data = form.val('demoForm'); // 假设 form 的 lay-filter="demoForm"
console.log(data.tag); // ['js', 'py'] —— 是数组，不是字符串
- 如果某个
name下只有 1 个 checkbox 被选中，data.tag仍是数组（长度为 1），不是字符串 - 如果没勾任何一项，
data.tag是undefined，不是空数组，需要自己判空处理 - 千万别给每个 checkbox 设不同
name，否则form.val()根本收不到多个值
后端接收时发现只收到一个值？检查是否漏了 [] 后缀
即使前端传的是数组，某些后端框架（如 PHP、Java Spring）默认只接收第一个同名参数。比如 POST 数据中 tag=js&tag=py，PHP 需要写成 name="tag[]" 才能自动转成数组。
所以更稳妥的写法是：
<input type="checkbox" name="tag[]" value="js"> <input type="checkbox" name="tag[]" value="py">
- layui 本身不强制要求
[]，但后端解析逻辑依赖它 - 若后端是 Node.js（如 Express），默认
req.body.tag就是数组，加不加[]都行；但 PHP、ThinkPHP、Laravel 等必须加 - 用
form.val()获取的值仍是['js', 'py']，和name是否带[]无关；但提交到服务端时，name 写法直接影响后端能否收到完整数组
为什么用 jQuery 选 :checked 比用 form.on 更可靠？
因为 form.on('checkbox') 的 data.value 只反映「当前操作的那个复选框」的状态变化，不是全量结果。比如用户先勾 A，再勾 B，第一次触发时 data.value === 'A'，第二次是 'B'，你永远拿不到「A 和 B 都勾着」这个快照。
所以只要涉及「获取当前全部选中项」，必须绕过事件参数，直接查 DOM：
function getSelectedCheckboxes(name) {
return Array.from($(`input[name="${name}"]:checked`)).map(el => el.value);
}
// 调用
var selected = getSelectedCheckboxes('userRoles');
- 不要在
form.on回调里只依赖data.value做业务逻辑 - 提交前、弹窗确认前、AJAX 发送前，都该用 DOM 查询兜底
- 如果页面有分页或局部刷新，记得每次更新复选框后调用
form.render('checkbox')，否则新元素不响应事件
data.value 是全量值，二是后端没配好 name 的 [] 后缀导致只收一个。别的都是细节，但这两个一错，整个多选就失效。 
