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

作者：袖梨 2026-08-22

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