直接在<input type="radio">标签加checked可设默认选中,但必须调用layui.form.render('radio')同步样式和事件;name需一致保证互斥,动态设置需先改DOM再渲染,AJAX加载后也须重新render。

直接在 <input type="radio"> 标签上加 checked 属性即可生效,但必须配合 layui.form.render('radio') 才能同步样式和事件绑定。
普通表单里写死默认选中
HTML 层面最简单的方式就是写死 checked:
<div class="layui-form"> <input type="radio" name="status" value="1" title="启用" checked> <input type="radio" name="status" value="2" title="禁用"> </div>
-
name必须一致,否则互斥失效 -
title值会自动转成文字,不用额外加<label> - 仅靠
checked不够——Layui 默认不识别原生状态,必须调layui.form.render('radio')
动态设置后手动触发渲染
比如从接口拿到用户性别是 "女",想设对应 radio 为默认选中:
layui.use('form', function(){
var form = layui.form;
// 先设 DOM 状态
$('input[name="sex"][value="女"]').prop('checked', true);
// 再通知 Layui 重绘样式和事件
form.render('radio');
});
- 不能只改
prop('checked', true)就完事,否则 UI 不更新、事件也不绑定 - 如果 radio 是 AJAX 加载进来的,得等 DOM 插入后再调
form.render('radio') - 别漏掉
layui.use(['form'], ...),否则form模块未加载,render会报错
监听 radio 选中值时要注意的坑
用 form.on('radio(filter)', callback) 拿值最可靠,但有几个硬性前提:
- radio 必须包裹在带
lay-filter="filter"的<form>或<div class="layui-form">内 - 同组所有 radio 的
name必须完全相同,大小写、空格都不能差 - 不要用原生
click或change监听,Layui 的事件流不走那里 - 禁用项(
disabled)不会触发form.on('radio'),但form.val('filter')仍可读取其值
最容易被忽略的是:哪怕你写了 checked,也得确保 form.render('radio') 在页面 DOM 就绪后执行——它不是自动发生的,也不是只调一次就永久生效;DOM 动态增删 radio 后,必须再 render 一次。


















