应使用 layui.form.val() 获取所有选中值：统一设置 checkbox 的 name 属性（如 name="roles"），确保 form 有 lay-filter 并已执行 form.render()，调用 form.val('filterName') 后取 data.roles || [] 即可安全获得选中值数组。
layui checkbox 获取所有选中值的正确写法
直接用 layui.form.on('checkbox') 监听事件只能拿到当前勾/取消的那个 checkbox，不是全部已选中的。要获取「当前表单里所有被勾选的 checkbox 的 value」，得主动遍历 dom 或借助 layui 的内置方法。
用 layui.form.val() 一次性取整组 checkbox 值
这是最稳妥的方式：给 checkbox 统一设置 name 属性（比如 name="roles"），然后调用 form.val() 读取整个 name 对应的值——它会自动返回数组。
示例 HTML：
<input type="checkbox" name="roles" value="admin"> 管理员<br><input type="checkbox" name="roles" value="editor"> 编辑<br><input type="checkbox" name="roles" value="viewer"> 查看者
JS 获取：
var form = layui.form;<br>var data = form.val('example'); // 'example' 是你 form 的 lay-filter 值<br>console.log(data.roles); // ['admin', 'editor'] 或 []
-
form.val()返回的是以name为 key 的对象，同名 checkbox 自动聚合成数组 - 必须确保 form 容器有
lay-filter="example"，且form.render()已执行（通常在layui.use回调里初始化） - 未勾选时对应 key 的值是
undefined，不是空数组，建议用data.roles || []
手动遍历 input[name="xxx"]:checked 更灵活但易漏细节
如果不想依赖 form.val()（比如 checkbox 在 form 外、或需要兼容非 layui 渲染的原始 input），可用原生选择器遍历：
var checkedValues = $('input[name="roles"]:checked').map(function(){<br> return this.value;<br>}).get();
- 注意：layui 渲染后实际 checkbox 被隐藏，真实可操作的是外层的
.layui-form-checkbox，但它的value不一定等于原始 input 的 value；所以务必对原始<input type="checkbox">操作 - 若用原生 JS：
document.querySelectorAll('input[name="roles"]:checked')，记得用.forEach或Array.from()转数组 - 没引入 jQuery 就别用
$()，否则报错$ is not defined
监听 checkbox 变化时同步更新数组的坑
很多人想在每次勾选/取消时立刻拿到最新数组，但直接在 form.on('checkbox') 里调 form.val() 可能取到旧值——因为 layui 的渲染是异步的，事件触发时机早于 DOM 更新完成。
- 安全做法：加个
setTimeout延迟 0ms 再取值，让渲染完成 - 或者改用
change事件监听原始 input：document.querySelector('form').addEventListener('change', function(e){ if(e.target.type==='checkbox') {...} }) - 不要在监听回调里直接操作
e.elem的兄弟节点，layui 的 DOM 结构嵌套深，容易选错
真正容易被忽略的是：checkbox 的 name 必须一致且非空，否则 form.val() 根本不会收集；还有就是表单未通过 form.render() 初始化，所有监听和取值都会失效。
