layui form radio 用 form.val() 取不到值是因为缺少 lay-filter 属性、未加载 form 模块、DOM 未就绪、name 不一致或未调用 form.render()。
layui form radio 用 form.val() 取不到值?检查表单是否绑定了 lay-filter
layui 的 radio 必须嵌套在 form 容器里,且该 form 元素必须有 lay-filter 属性,否则 form.val() 完全无法识别任何控件。这是最常被忽略的前提。
- 错误写法:
<form><input type="radio" name="sex" value="1"></form>—— 没有lay-filter,form.val('xxx')返回空对象 - 正确写法:
<form class="layui-form" lay-filter="demoForm"><input type="radio" name="sex" value="1"></form> -
lay-filter值必须和form.val()的第一个参数完全一致(区分大小写)
为什么 form.val('demoForm') 返回 undefined 或空对象?
除了漏掉 lay-filter,还有三个高频原因:
-
layui.use(['form'], function(){...})没执行,或者form模块没传入回调 —— 没加载模块就调用,函数不存在 - DOM 尚未渲染完成就执行取值,比如写在
<script>标签里但放在 HTML 上方 —— 应确保 DOM 已就绪,或用layui.ready() -
name属性缺失或不一致 ——radio组必须共用同一个name,form.val()才会把它们当一组处理
直接用原生 DOM 获取 radio 值更可靠?什么时候该这么做
当表单结构动态生成、或 form.render() 没触发导致 layui 未接管时,原生方式反而更稳:
- 获取选中值:
document.querySelector('input[name="sex"]:checked')?.value - 监听变化:
form.on('click', 'input[name="sex"]', function(){...}),注意别用change,layui radio 点击后不会触发原生change - 兼容性无问题,但失去 layui 表单校验、禁用状态同步等能力
radio 默认选中但 form.val() 不返回?记得手动 form.render()
layui 不会自动监听 DOM 初始化时的 checked 属性,即使 HTML 里写了 checked,也要显式渲染:
- 页面加载完立即执行:
form.render('radio', 'demoForm')(第二个参数是lay-filter值) - 如果只渲染 radio,不传第二个参数也行,但建议带上,避免影响其他表单
- 动态插入 radio 后也必须调用
form.render(),否则form.val()仍不可用
lay-filter、模块加载、DOM 就绪、name 一致、以及一次关键的 form.render()。漏掉任意一环,form.val() 就会静默失败,而不是报错。










