layui单选框赋值后无反应的根本原因是未触发UI重绘,必须显式调用form.render('radio')同步显示;且form.val()需传字符串值、DOM结构合规、执行时机正确。

layui单选框赋值后没反应,根本原因是没触发 UI 重绘
layui 的 radio 不靠原生 checked 属性驱动视觉状态,而是依赖封装后的 DOM 结构(比如 .layui-form-radio 容器)。直接调用 form.val() 只写入数据,不更新 UI —— 这不是 bug,是设计逻辑。必须显式调用 form.render('radio') 才能同步显示。
form.val() 传参格式错,单选框永远不打勾
单选框组的 name 必须一致(如 name="gender"),且 form.val() 要求传入的是**字符串值**,不是数字或布尔值。
-
form.val('myForm', { gender: 1 })→ 不生效(数字 1 ≠ 字符串 "1") -
form.val('myForm', { gender: '1' })→ 正确(前提是 DOM 中有value="1"的<input type="radio">) -
form.val('myForm', { gender: ['1'] })→ 错误(数组只用于 checkbox,radio 传数组会被忽略)
动态插入 radio 后调 render 仍无效,大概率是 DOM 结构不合规
layui 只识别符合其封装规范的 radio 结构。裸写 <input type="radio" name="gender" value="1">男 是无效的——它根本不会被注册进表单实例。
- 必须包裹
<div class="layui-form-radio">容器,且内部含<i class="layui-icon"> - 正确结构示例:
<input type="radio" name="gender" value="1" title="男"><div class="layui-form-radio"><i class="layui-ic"></i><span>男</span></div>
- 用
$.html()替换整个区域会销毁事件绑定;应改用$.append()或insertAdjacentHTML()增量插入 - 确保目标 radio 在带
lay-filter="xxx"的<form>内,否则form.render('radio', 'xxx')找不到作用范围
在弹窗或 AJAX 加载内容里赋值失败,时机和上下文最关键
layer.open 弹窗、tab 动态加载、Vue 混合场景下,常见问题是 form.render('radio') 执行时 DOM 还没插入完成,或 form 模块未加载。
- 所有
form相关操作(包括render和val)必须写在layui.use(["form"], callback)内部 - 确认
form.render('radio', 'yourFilter')在$("input[name='gender']").length > 0之后执行 - 不要在回调闭包里用错
this或变量作用域,导致 target 元素查不到 - 如果用子页面调用父页面的
form.val(),需先深拷贝对象:form.val('filter', JSON.parse(JSON.stringify(obj))),否则引用失效
form.use 已加载,最后严格按「插入 DOM → form.render('radio', 'filter') → form.val('filter', {...})」三步走。


















