单选框未渲染的主因是父容器缺失layui-form类,需确保radio嵌套在带该class的容器内;动态插入后须在dom挂载完成后再调用form.render('radio');设值时form.val()要求值类型为字符串且选项存在。

单选框没渲染,先看父容器有没有 layui-form
layui 的 radio 默认被 .layui-form input[type=radio] 设为 display: none,它只在识别到父级有 class="layui-form" 时才用伪元素画出美化样式。如果只是把 <input type="radio"> 直接丢在 body 或普通 div 里,它永远是原生小圆点甚至完全不可见。
- 错误写法:
<div><input type="radio" name="sex" value="1"></div> - 正确写法:
<div class="layui-form"><input type="radio" name="sex" value="1"></div>(form、section等任意块级元素都行,但必须显式加这个 class) - 如果用了
lay-filter,确保它写在layui-form容器上,而不是单个 radio 上
动态插入后 form.render('radio') 没反应?检查调用时机
常见于 layer 弹窗、AJAX 加载表单 HTML 后直接调用 form.render('radio') —— 此时 DOM 可能还没真正挂载完成,form.render() 找不到目标元素,等于白跑。
- 推荐做法:插入 HTML 后用
setTimeout(() => form.render('radio'), 0)或requestAnimationFrame(() => form.render('radio')) - jQuery 场景下可用
$.html()后链式调用.promise().done(() => form.render('radio')) - 千万别在
layer.open()外提前调,也别等用户点击再补;必须在 DOM 插入完成、且form模块已加载的前提下执行
form.val() 设值后 UI 不更新,大概率是值类型或选项缺失
form.val() 只设内部状态,不触发 UI 刷新;它生效的前提是:目标 radio 已存在对应 value 的选项,且该组 radio 已被 form.render() 处理过。
- 传参必须是字符串,比如
form.val('filterName', { sex: '1' }),传1(数字)会失败 - 确保 HTML 中至少有一个
<input type="radio" name="sex" value="1">,否则即使设了值,UI 也没东西可高亮 - 如果用 JS 动态生成 radio,得先 append 到 DOM,再
form.render('radio'),最后form.val(),顺序不能乱
layer 弹窗里单选框始终不渲染?别漏掉手动 render 范围
layer 弹窗内容是 append 到 的新节点,不在初始页面结构中,所以初始化时的自动渲染完全无效。关键是:要对弹窗内的 layui-form 容器做局部渲染,而不是全局刷。
- 弹窗打开后,在
success回调里获取弹窗 DOM:var $dom = $('.layui-layer-content').find('.layui-form') - 确保该容器有
lay-filter,比如<div class="layui-form" lay-filter="editForm"> <li>然后调:<code>form.render('radio', 'editForm')(第二个参数必须和 HTML 中的lay-filter值完全一致,大小写、空格都不能错)
最容易被忽略的是 lay-filter 的拼写一致性——HTML 里是 lay-filter="userForm",JS 里写成 form.render('radio', 'userform') 就会静默失败,连报错都没有。











