Layui 实现自动选中 Radio 单选框的正确方法
作者:工具松鼠时间:2026-10-23 10:42:33浏览:352
本文介绍在 Layui 框架中,通过 Ajax 获取后端数据后自动选中 Radio 单选框的实现方法。核心步骤包括使用 jQuery 的 prop 方法设置 checked 属性,并务必调用 form.render() 刷新表单渲染,以确保选中状态在前端正确显示。
Layui Radio 自动选中实现步骤
首先构建 HTML 表单结构,定义包含 Radio 选项的表单元素。
<div class="layui-form-item">
<label class="layui-form-label">消息通知</label>
<div class="layui-input-block">
<input name="is_notice" value="1" type="radio" title="通知" checked="">
<input name="is_notice" value="0" type="radio" title="不通知">
</div>
</div>
接着使用 JS 通过 Ajax 向后端请求数据,获取需要回显的值。
$.get(
"{:url('user/xxxx')}",
{'id':adminId},
function(d){
//设置是否通知
if(d.is_notice == 0){
$("input[name=is_notice][value=1]").prop("checked","false");
$("input[name=is_notice][value=0]").prop("checked","true");
}
form.render(); //更新全部
}
);
必须注意,在修改 Radio 选中状态后,务必调用 form.render() 方法,否则前端界面不会更新选中状态。
此处省略 Layui 库的引入步骤,假设环境已配置完毕。
记录此实现要点。
以上即为 Layui 中自动选中 Radio 单选框的完整实现方案,供开发者参考与使用。
作者最新文章
JS代码在线格式化工具推荐:无需安装快速美化
2026-11-05 17:17:49
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比:哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45
无需安装环境,5款主流JavaScript在线运行工具推荐
2026-11-03 18:23:26
