应使用 form.val('formFilter') 获取所有选中值,确保同名 checkbox 的 name 一致且显式设置 value;注意其返回值类型可能为字符串或数组,需统一处理为数组再校验。
layui checkbox 怎么用 form.on('checkbox') 拿到所有选中值
不能只监听单个 checkbox 的开关事件,form.on('checkbox') 默认只传当前触发项的 elem 和 othis,不带全局状态。得自己遍历 dom 或借助 form.val()。
- 推荐用
form.val('formFilter')一次性取整个表单数据,它会自动把同名 checkbox 合并为数组 - 确保每个 checkbox 的
name属性一致(如name="interest"),且都有value值 - 如果没设
value,默认是"on",容易和真实业务值混淆,务必显式写value="java" - 别依赖
checked属性判断——Layui 渲染后会操作 DOM,原生属性可能不同步,必须用form.val()或$('input[name="xxx"]:checked')
为什么 $('input[name="xxx"]:checked').map(...) 有时拿不到值
Layui 把原始 checkbox 隐藏了,实际显示的是它生成的伪元素(.layui-form-checkbox)。直接 jQuery 选中没问题,但要注意时机:必须在 form.render() 之后、或 DOM 真正渲染完成后再执行。
- 如果在
layui.use(['form'], callback)外就运行 jQuery 选择器,很可能查不到任何:checked -
form.render()后再查,或者把逻辑包进form.on('submit|checkbox')回调里更稳妥 - 示例:
const vals = $('input[name="tag"]:checked').map((i, el) => el.value).get();
form.val('formFilter') 返回对象里 checkbox 字段是字符串还是数组
取决于 HTML 中 checkbox 是否「同名且多选」:只要存在两个及以上 name="xxx" 的 checkbox,form.val() 就返回数组;如果只有一个,返回字符串。这是 Layui 的隐式约定,不是 bug。
- 哪怕你只勾了一个,只要同名 checkbox 存在多个,结果就是数组(如
["vue", "react"]) - 如果页面里只剩一个 checkbox 却还想要数组,手动包装:
const arr = Array.isArray(res.tags) ? res.tags : [res.tags];
- 注意:空选时
form.val()对该字段返回undefined,不是空数组,需自行处理
提交前校验 checkbox 至少选一个的坑
很多人写 if (!data.tags) 判空,但当没选中时 data.tags 是 undefined,而选了一个是字符串,选了多个才是数组——类型不统一导致判断失效。
- 安全写法:
const selected = Array.isArray(data.tags) ? data.tags : (data.tags ? [data.tags] : []);
- 然后用
selected.length === 0判空,比!data.tags可靠 - 如果后端要求必须传数组(哪怕为空),记得始终返回
[],不要留undefined











