Layui 实现自动选中 Radio 单选框的正确方法

作者：工具松鼠

时间：2026-10-23

本文介绍在 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 单选框的完整实现方案，供开发者参考与使用。