layui复选框如何获取选中的多个值

必须用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']});

1. userRoles 是 name 属性值，不是 lay-filter 值；lay-filter 仅用于事件绑定，不参与数据收集
2. 必须用 $('input[name="xxx"]:checked') 查 DOM，不能只信 data.value
3. 如果复选框是动态生成的（比如表格行内渲染），需确保事件委托生效，建议用 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'] —— 是数组，不是字符串

1. 如果某个 name 下只有 1 个 checkbox 被选中，data.tag 仍是数组（长度为 1），不是字符串
2. 如果没勾任何一项，data.tag 是 undefined，不是空数组，需要自己判空处理
3. 千万别给每个 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">

1. layui 本身不强制要求 []，但后端解析逻辑依赖它
2. 若后端是 Node.js（如 Express），默认 req.body.tag 就是数组，加不加 [] 都行；但 PHP、ThinkPHP、Laravel 等必须加
3. 用 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');

1. 不要在 form.on 回调里只依赖 data.value 做业务逻辑
2. 提交前、弹窗确认前、AJAX 发送前，都该用 DOM 查询兜底
3. 如果页面有分页或局部刷新，记得每次更新复选框后调用 form.render('checkbox')，否则新元素不响应事件

实际项目里最常出问题的点就两个：一是误以为 data.value 是全量值，二是后端没配好 name 的 [] 后缀导致只收一个。别的都是细节，但这两个一错，整个多选就失效。