layui单选框需包裹在带lay-filter的form内且同name,用form.on('radio')监听,动态添加后须调form.render('radio','filter');获取值用form.val('filter'),禁用项不触发事件但form.val()仍可读取。

layui 单选框怎么用 form.on('radio') 监听选中值
layui 的单选框必须包裹在 form 容器里,且每个 input[type="radio"] 要有相同的 name 属性,否则监听无效。监听事件用的是 form.on('radio'),不是 click 或 change 原生事件。
常见错误是直接给 radio 绑定 onclick,结果取不到值,或者漏写 name 导致多个单选组互相干扰。
-
form.on('radio')回调参数data里有value(当前选中的值)和othis(当前触发的 jQuery 对象) - 必须先执行
form.render()(尤其动态插入 radio 后),否则事件不生效 - 如果页面加载后才渲染表单,要确保
layui.use(['form'], ...)中 form 模块已加载完成
如何用 form.val() 主动获取单选框当前值
当不需要监听、只需一次性读取时,form.val('formFilter') 最可靠——它返回整个表单的键值对,其中单选框的 key 就是它的 name,value 是当前选中的 value。
注意:如果没选中任何项,对应 key 的值为 undefined,不是空字符串;若多个同名 radio 都没 checked,form.val() 不会报错,但取值为 undefined。
- 表单容器必须有
lay-filter="formFilter",否则form.val('formFilter')返回空对象 - 不要用
$('input[name="xxx"]:checked').val(),因为 layui 可能隐藏原生 radio,DOM 状态和视觉状态不同步 -
form.val()只读取已渲染且被 layui 管理的表单,动态添加后需调用form.render('radio')
为什么 form.on('radio') 有时不触发
最常踩的坑是:radio 元素不在 form 标签内,或 form 缺少 lay-filter 属性,或模块未正确引入。
- 检查控制台是否报错
form is not defined,说明layui.use(['form'], ...)没写,或 script 加载顺序不对 - 用浏览器开发者工具看 radio 是否被 layui 自动加了
layui-anim类——没加说明form.render()没执行或失败 - 如果单选框是 JS 动态生成的,必须在插入 DOM 后立即调用
form.render('radio', 'formFilter'),只传类型不传 filter 会失效
带 disabled 或默认选中时要注意什么
layui 对 disabled 的 radio 不触发 form.on('radio'),这是预期行为;但 form.val() 仍会返回其 value(如果它恰好是唯一 checked 的)——这点容易误判逻辑。
- 默认选中要用
checked属性(不是defaultChecked),且必须配合form.render()才能被识别 - 禁用状态下用户无法切换,但代码里仍可通过
form.val('formFilter', {name: 'xxx'})强制设值(设完要再form.render('radio')) - 如果同时存在多个同名 radio,只有第一个
checked属性生效,后续的会被忽略——layui 只认 DOM 上第一个 checked
form 模块自己查 DOM,也别依赖原生事件。值丢了,八成是 lay-filter 没对上,或者 form.render() 忘了调。











