layui中监听radio必须用form.on('radio(filter)', callback),filter需与lay-filter值一致,同组name必须相同,动态插入后需调用form.render('radio'),data.value是唯一可靠取值方式。

layui中必须用form.on('radio(filter)')监听
原生change或click事件在 layui radio 上基本无效——因为真实 <input type="radio"> 被隐藏,UI 层是用 div + span 模拟的,事件绑定完全由 layui 内部接管。
正确写法只有一种:form.on('radio(filter)', callback),其中 filter 必须和 HTML 中 lay-filter="xxx" 的值完全一致。
-
lay-filter是硬性要求,缺了或拼错,回调函数永远不会触发 - 同组 radio 必须有相同
name属性,否则 layui 不认为它们是一组,form.on无法识别切换逻辑 - 如果 radio 是 JS 动态插入(比如 ajax 后
innerHTML替换),必须紧接着调用form.render('radio'),否则不响应点击 - 别把
radio和select的监听写混:写成form.on('select(filter)')或form.on('checkbox(filter)')都不会生效
回调里的 data.value 是唯一可靠取值方式
layui 封装的回调参数 data 是个轻量对象,字段极少,但每个都有明确用途:
-
data.value:当前被点击 radio 的value字符串,这是你最该用的字段 -
data.elem:指向原始<input type="radio">DOM 元素,可用于读name、disabled等属性,但不能用data.elem.value取当前选中值(它永远返回初始值) -
data.othis字段不存在——radio 没有美化后的外层容器,这点和select不同,别在代码里尝试访问data.othis
常见错误:试图用 $(data.elem).val() 或 data.elem.checked 判断状态。这些返回的是原始 DOM 状态,和用户实际看到的 UI 不同步。
动态设置 radio 选中并触发监听
不能直接操作 DOM 或 dispatch 事件,必须走 layui 官方路径:
- 用
form.val('filterName', { 'fieldName': 'targetValue' })设置值,其中fieldName是 radio 的name属性 - 紧跟着调用
form.render('radio', 'filterName'),否则form.on('radio(filter)')不会执行 - 漏掉
form.render()的典型现象:界面上看着选中了,但回调函数没运行,表单提交时字段仍是空 - 如果页面有多个表单容器,第二个参数传
filterName可避免全局重绘,提升性能
以下写法全部无效:$('input[name=sex]').val('1').trigger('change')、elem.checked = true; elem.dispatchEvent(new Event('change'))——layui 根本不监听原生元素上的事件。
区分“首次加载默认选中”和“用户主动切换”
layui 的 form.on('radio') 在初始化渲染时也会触发一次(如果某项带 checked 属性),这容易和用户真实操作混淆。
- 若需区分,得自己维护上一个值:
let lastRadioValue = null;,在回调里先比对再更新 - 注意:初始化触发时
data.elem的checked属性为true,但data.value才是真正有效的值,不要依赖 DOM 属性判断 - 后端返回的默认值如果是
"0"或"null"字符串,要按实际约定做===判断,别假设一定是空字符串
这个细节常被忽略——很多业务逻辑要求“用户改过才校验”,但没做状态快照的话,一刷新页面就误判为已操作。


















