layui单选框默认选中需通过form.val()设置value值而非索引,且必须在dom就绪后先render再设值,注意value类型匹配、name属性严格一致及动态加载时的执行顺序。

直接用 form.val() 设值再 form.render('radio')
默认选中第 n 个单选框,本质是让对应 value 的 radio 被选中,而不是靠索引。Layui 不支持“选第 2 个”这种 DOM 索引操作——它只认 value 值匹配。
假设你的单选框 HTML 是:
<input type="radio" name="status" value="0" title="待处理"><input type="radio" name="status" value="1" title="已通过"><input type="radio" name="status" value="2" title="已拒绝">
你想默认选中第二个(即 value="1"),就该设这个值:
-
form.val('myForm', { 'status': '1' })—— 注意表单必须有lay-filter="myForm" - 紧接着调用
form.render('radio')或更精准的form.render('radio', 'myForm') - 确保这段代码在
layui.use(['form'], function(){...})内执行,且 DOM 已就绪
动态加载数据后设默认值,别等 form.render() 完再操作
如果单选框选项是 AJAX 加载进来的(比如权限列表、状态枚举),常见错误是:先 $.get() 拿到数据、拼完 HTML 插入、再调 form.val() —— 但此时 Layui 还没接管新插入的 radio,form.val() 会静默失败。
- 正确顺序:插入 DOM → 立即调
form.render('radio')(让 Layui 绑定事件)→ 再form.val()设值 - 或者更稳妥:在插入 HTML 后,用 jQuery 手动设
prop('checked', true),再调一次form.render('radio') - 别用
$('input[name="status"]').eq(1).prop('checked', true)后不 render —— Layui 会把它清掉
后端返回数字 1,但 JS 判断写成 d.status === 1 却不生效?
这是典型类型不匹配问题。Layui 的 form.val() 接收的是字符串值,而很多后端返回的 JSON 字段是数字类型(如 {"status": 1})。直接传数字进去,form.val() 可能无法匹配到对应 value 属性(因为 HTML 中 value="1" 是字符串)。
- 保险做法:显式转字符串,
form.val('myForm', { 'status': String(data.status) }) - 或在后端统一返回字符串,避免前端类型转换
- 如果用 templet 渲染表格里的 radio,默认选中也一样:
d.status == '1'比===更容错,但最好统一类型
为什么 checked 属性写在 HTML 里也不生效?
不是 HTML 写错了,而是 Layui 初始化时会扫描所有 input[type=radio] 并重写 DOM 结构(加包裹层、图标等),原始 checked 属性会被丢弃。
- 唯一可靠路径:初始化表单后,用
form.val()+form.render('radio') - 临时调试可绕过:在
layui.use回调里加setTimeout(() => { form.render('radio') }, 10),但这是权宜之计,说明 DOM 插入或模块加载时机有问题 - 如果用了
lay-skin="primary",注意它对checked的兼容性更差,建议优先用默认皮肤
name 完全一致。哪怕一个空格、大小写不同,都会导致多个被同时选中——设默认值前先检查所有 radio 的 name 是否严格相同。











