layui页面所有单选框值如何批量获取

时间：2026-08-24 14:04

在 layui 中，批量获取单选框的值应优先使用form val()，而不是遍历 DOM。原因在于它依赖的是组件内部的状态缓存，并非原生 DOM 属性；同一 name 的 radio 组在返回对象中对应字段始终是字符串，未选中时该字段不会出现。若页面中的单选框是动态渲染出来的，还需要执行form r

在 layui 中，批量获取单选框的值应优先使用form.val()，而不是遍历 DOM。原因在于它依赖的是组件内部的状态缓存，并非原生 DOM 属性；同一 name 的 radio 组在返回对象中对应字段始终是字符串，未选中时该字段不会出现。若页面中的单选框是动态渲染出来的，还需要执行form.render('radio')后才能正确读取。

layui如何批量获取页面所有单选框的值

layui单选框批量取值必须用form.val()，不要直接遍历DOM

推荐直接调用layui.form.val('filterName')，它会自动汇总所有同名radio组的选中结果，并在返回对象中以对应的name字段输出当前被选中的value。如果手动使用$('input[type=radio]:checked')或document.querySelectorAll去读取 DOM，在 Layui 环境下往往无法稳定拿到正确值。因为实际的radio通常处于隐藏状态，界面上的选中效果由伪元素和框架状态控制，原生checked属性并不一定会同步更新。

为什么form.val()可以正确获取radio的值

form.val()底层依赖的是 Layui 表单模块自己的状态管理机制，它不是简单读取 DOM，而是读取框架维护的内部缓存。只要你的radio标签设置了name属性，并且没有添加lay-ignore，Layui 就能够正确识别并完成分组聚合。

同一组radio必须使用相同的name，否则会被识别为多个独立控件
如果这一组没有任何选中项，那么返回对象中不会包含该name字段（不是null也不是undefined）
带有disabled属性的radio选项会被自动排除，不参与结果返回
动态插入或重新渲染单选框后，必须执行form.render('radio')，否则form.val()无法识别新的节点

常见误区：在radio事件回调中只读取当前项

很多开发者会在form.on('radio(filter)')事件中直接使用data.value或$(data.elem).val()，但这种方式只能拿到当前点击的那个选项的value，并不等于“页面中所有单选框的当前值”。如果你的需求是批量获取整个表单里所有 radio 的值，仍然应该调用form.val('filterName')：

form.on('radio(userForm)', function(data){
var all = layui.form.val('userForm'); // ✅ 正确：拿到整个表单所有字段
console.log(all.gender); // 比如 "male"
console.log(all.level);// 比如 "vip"
});

不要把data.value误当作全局状态的唯一来源——因为用户可能通过键盘切换、JS 触发，或者点击其他 radio 来改变状态，此时仅凭当前回调值并不能完整反映整个表单的最新结果。