Layui表单checkbox如何获取所有选中的值-Layui教程-PHP中文网

layui中获取checkbox选中值最稳妥的方式是form.val('filter')，它自动同步UI状态、过滤disabled项并支持动态渲染，而jQuery的:checked选择器因Layui隐藏原始DOM而不可靠。

layui checkbox 获取选中值的正确写法

直接用 form.val('filter') 是最稳妥的方式，不要手动遍历 dom 或监听 click 事件取值——layui 的表单模块已经封装好了状态同步逻辑，手动操作反而容易漏掉动态渲染或 disabled 状态下的值。

为什么 `$("input[type=checkbox]:checked")` 不可靠

这个 jQuery 写法在 Layui 中会出问题，因为 Layui 把原始 checkbox 隐藏了，用伪元素重绘 UI，真实 DOM 的 checked 状态不会实时更新（尤其在调用 form.render() 后或通过 form.on('checkbox(...)') 切换时）。

原始 checkbox 的 checked 属性可能滞后于 UI 显示
disabled 的 checkbox 如果被 JS 手动设为 checked，:checked 仍会匹配到它，但 form.val() 自动过滤掉 disabled 项
表单是动态加载或异步渲染时，DOM 查询容易错过新节点

`form.val('filter')` 返回值结构和使用场景

假设你的 form 设置了 lay-filter="userForm"，且有多个同名 checkbox：

<input type="checkbox" name="hobby" value="read" title="阅读"><input type="checkbox" name="hobby" value="swim" title="游泳"><input type="checkbox" name="hobby" value="code" title="写代码">

调用 form.val('userForm') 会返回一个对象：{hobby: ["read", "code"]}（数组形式），如果全未选中，则 hobby 字段不存在或为 undefined。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

必须确保每个 checkbox 的 name 相同，Layui 才会聚合为数组
value 值不能为空字符串或纯空格，否则会被忽略
如果某个 checkbox 加了 disabled，它不会出现在返回对象里
表单未初始化或未执行 form.render()，form.val() 可能读不到最新状态

常见错误：在 `form.on('checkbox(...)')` 回调里直接读 DOM

很多人在监听事件时顺手写 $(this).prop('checked')，这只能拿到当前点击项的状态，不是“所有选中项”。要获取完整列表，仍得调用 form.val()：

form.on('checkbox(hobbyFilter)', function(data){
  var allData = form.val('userForm'); // ✅ 正确：拿到全部字段
  console.log(allData.hobby); // ["read", "code"]
});