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

作者最新文章