根本原因是事件绑定时机或目标不匹配;需确保radio在layui-form容器内、lay-filter值严格一致、监听代码在layui.use内且dom就绪后执行,并补全name和value属性。

form.on('radio(filter)') 为什么监听不到变化
根本原因是事件绑定时机或目标不匹配。Layui 的 form.on('radio(filter)') 只监听由它自己渲染并接管的 radio 元素,且依赖 lay-filter 属性严格一致。常见失效场景包括:radio 不在 class="layui-form" 容器内、lay-filter 值拼写错误、事件监听代码写在 layui.use(['form'], ...) 外部,或 DOM 尚未就绪就执行了监听注册。
检查点:
• 打开开发者工具,确认 <input type="radio"> 父级是否有 class="layui-form"
• 查看 radio 元素是否带 lay-filter="xxx",且和 form.on('radio(xxx)') 中的 xxx 完全一致(含大小写、空格)
• 确保监听代码包裹在 layui.use(['form'], function(){...}) 内,且在 form.render('radio') 之后执行
动态设值后 change 不触发,怎么补救
如果你用 JS 修改了 radio 的 checked 属性(比如 $('input[value="2"]').prop('checked', true)),但没触发 form.on('radio(filter)'),这不是 bug,是设计使然 —— Layui 不监听原生状态变更,只响应用户点击或 form.val() + form.render() 组合。
- 正确做法:先改值,再渲染,顺序不能反
form.val('userForm', { gender: '1' });form.render('radio', 'userForm'); - 如果必须用原生操作(如兼容旧逻辑),则手动触发事件:
$('input[name="gender"][value="1"]').prop('checked', true).trigger('change');(注意:这仅能触发 jQuery 绑定的事件,form.on仍不会响应) - 避免混用:不要一边调
form.val(),一边又用.prop('checked'),两者状态可能错位
form.render('radio') 后 UI 没更新,但 data.value 是对的
现象是控制台打印 data.value 正确,但界面上那个圆圈图标没变,说明渲染未生效或未覆盖到目标区域。
- 确认
form.render('radio', 'filterName')第二个参数和表单容器的lay-filter="filterName"严格一致 - 检查是否漏掉
form.render('radio')—— 单独调form.render()不会处理 radio - 若 radio 在弹窗(如
layer.open)或 tab 页中,确保form.render('radio', 'filterName')在 DOM 插入完成后再执行,例如:layer.open({ success: function(){ form.render('radio', 'myFilter'); } }); - 别在循环里反复调
form.render('radio'),应批量设置完所有checked状态后只 render 一次
监听到 event 但 data.value 是 undefined
这是最常被忽略的结构问题:Layui 要求同组 radio 必须有相同 name 属性,且每个 input 必须带 value。如果漏了 value,data.value 就是 undefined,哪怕 UI 看起来选中了。
- 错误写法:
<input type="radio" name="status" lay-filter="order">启用(没 value) - 正确写法:
<input type="radio" name="status" value="1" lay-filter="order">启用 - 动态生成时尤其注意:用
innerHTML或$.append()插入 radio,必须显式写出value属性 - 如果后端返回的是数字
1,但 DOM 中value="1"是字符串,匹配没问题;但如果后端传的是布尔true,而你写成value=true,实际 DOM 值是字符串"true",需保持一致
真实项目里最容易卡住的地方不是语法,而是 lay-filter 名字抄错、name 属性漏写、或者 form.render() 调得太早 —— 这三处出问题,连最基本的监听都收不到。











