form.val()取不到radio值是因为未满足全部硬性条件:表单容器需带layui-form类和lay-filter属性,同组radio须共用name及相同lay-filter,且需在DOM渲染后调用form.render('radio')并确保form模块已加载。
form.val() 取不到值?先确认 lay-filter 是否写对了
Layui 的 form.val() 对 radio 无效,除非你满足全部硬性条件:
- 表单容器必须带
class="layui-form"和lay-filter="xxx"属性 - 所有同组
<input type="radio">必须共用同一个name,且每个都带上相同的lay-filter="xxx" -
layui.use(['form'], function(){})已执行,form模块已加载 - DOM 渲染完成后再调用,比如放在
layui.ready()里,或 script 放在 body 底部 - 初始有
checked属性的 radio,必须手动执行form.render('radio', 'xxx'),否则form.val()不认
漏掉任意一条,form.val('xxx') 都返回空对象,且不报错——这是最常踩的静默失败点。
form.on('radio(filter)') 是唯一可靠监听方式
直接给 radio 绑 onclick 或监听原生 change 事件基本失效,因为 Layui 渲染后会替换 DOM 结构,你点的其实是伪元素 .layui-form-radio。
正确做法只有一条:
- 确保所有 radio 共享
name和相同lay-filter值 - 在
layui.use(['form'], ...)回调中调用form.on('radio(filterName)', callback) - 回调参数
data.value就是当前选中的 value 字符串,直接用,不用再查 DOM - 注意:这个事件只在用户点击时触发,初始化默认选中、或代码调用
form.val()后不会自动触发
document.querySelector('input[name="x"]:checked')?.value 更轻量也更稳
当表单动态生成、或 form.render() 没被调用时,原生方式反而更可靠:
- 获取当前值:
document.querySelector('input[name="sex"]:checked')?.value(注意可选链,避免报错) - 监听变化:用
form.on('click', 'input[name="sex"]', ...),别用change,Layui radio 不触发原生 change - 这种方式不依赖
lay-filter,也不需要form.render(),但代价是失去校验、禁用状态同步等 Layui 表单能力
table.on('radio(filter)') 和表单 radio 不是一回事
表格里的 radio 单选和表单里的不是同一套机制:
- 表格必须在
cols中显式配置{type: 'radio'}列,且只能有一列 - 监听事件是
table.on('radio(filter)', callback),不是form.on - 回调参数
obj.data是当前行数据(仅含 cols 定义字段),obj.value是该行唯一标识(默认取lay-id) - 表格 radio 不走
form.val(),也不能用form.on监听,混用会导致事件完全不触发
容易被忽略的是:表单 radio 的 lay-filter 和表格 radio 的 filter 名字可以一样,但它们互不感知,各自独立作用域。别指望一个 form.on 能捕获表格里的点击。


















