layui checkbox需用form.on('checkbox(filtername)')监听，filtername为lay-filter值；获取全部选中值须手动遍历同name的:checked原生input，因form.val()仅返回首个选中值。
layui checkbox 怎么用 form.on('checkbox') 监听选中状态
layui 的复选框不是原生 <input type="checkbox">，而是通过 form.render('checkbox') 渲染后的美化组件，直接读 checked 属性或用 document.querySelectorAll('input[type=checkbox]:checked') 拿不到真实状态——因为 DOM 被替换成 <div class="layui-form-checkbox">，原生 input 被隐藏了。
<p>必须用 layui 的表单监听机制：</p>
<pre class="brush:php;toolbar:false;">form.on('checkbox(filterName)', function(data){
console.log(data.elem); // 原始 checkbox DOM 元素
console.log(data.value); // 当前 checkbox 的 value 值（注意：只有被勾选时才触发，取消勾选也会触发，但 data.elem.checked 是 false）
console.log(data.othis); // 对应的 layUI 渲染后的 jQuery 对象（含 .layui-form-checked 类）
});</pre>
<ul>
<li>这里的 <code>filterName 是你在 <input type="checkbox"> 上写的 lay-filter="xxx"，不是 id 或 name
data.value 判断“是否选中”，得结合 data.elem.checked
lay-filter，回调里 data.value 就是当前这个 checkbox 的 value；别误以为是所有选中项的集合怎么一次性获取所有已勾选的 checkbox 值（同名 name）
layui 不提供类似 form.val('formFilter', 'fieldName') 直接取多值的 API，form.val() 对 name="hobby" 这种复选框只返回第一个选中的值（bug 级限制）。
正确做法是手动遍历同 name 的原始 input 元素：
var checkedValues = [];
$('input[name="hobby"]:checked').each(function(){
checkedValues.push(this.value);
});
console.log(checkedValues); // ['read', 'swim']
- 务必用
:checked伪类，而不是查.layui-form-checked类——后者可能因未渲染或异步延迟而不同步 - 确保在
form.render()之后执行，否则:checked状态可能滞后于 UI - 如果 checkbox 是动态插入的，记得调用
form.render('checkbox')再监听
为什么 form.val('formFilter') 拿不到复选框全部值
这是 layui 2.8.x 及之前版本的已知行为：form.val() 内部对 type="checkbox" 的处理逻辑是「遇到第一个 checked 就返回其 value，然后 break」，不会收集全部。
- 这不是 bug，是设计如此——官方文档明确说它只适用于「单值字段」，复选框属于多值，需自行处理
- 不要试图给
name加[]（如name="hobby[]"）来绕过，layui 不解析这种命名约定 - 若用
form.on('submit')提交，后端接收时仍按正常 name 接收（PHP/Node.js 都能拿到数组），但前端 JS 获取必须手动遍历
容易忽略的兼容性细节
layui 2.7+ 默认开启「自动绑定」，但如果你禁用了自动初始化（比如写了 layui.config({init: false})），或者 checkbox 在 form.render() 之前就存在，会出现监听失效、状态不同步。
- 检查控制台有没有
layui use is not defined或form is not a module报错，确认form模块已加载 - 动态生成的 checkbox，不能只靠一次
form.render('checkbox')—— 如果后续又 append 了新选项，得再 render 一次 - 移动端点击无响应？可能是父容器有
pointer-events: none或 CSS 层级遮挡，layui 的 checkbox 实际点击区域是伪元素，对 z-index 敏感
