应使用templet函数输出原生radio标签,删掉type:'radio';name需统一(如"select_row"),value用d.id等唯一值;默认选中靠数据字段(如is_selected)驱动,templet中判断插入checked;监听用form.on('radio(xxx)')并确保form.render()已调用。
表格列用 templet 输出 radio,别写 type: 'radio'
直接在列配置里写 type: 'radio' 会触发 layui 内部接管逻辑,它会重写 dom、清掉 checked、甚至覆盖你手动加的 name 或 value。结果就是:html 看着像 radio,点不了,或者点了不互斥。
真正可控的方式是放弃 type: 'radio',改用普通列 + templet 函数输出原生 <input type="radio">:
- 列定义中删掉
type: 'radio',只留templet -
templet必须是函数,不能是字符串模板(否则拿不到d行数据) - 确保所有同组 radio 的
name完全一致,比如固定写死为"select_row",别拼d.id -
value必须有且非空,推荐用d.id或后端返回的唯一标识字段
默认选中靠数据字段驱动,不是靠 HTML 的 checked 属性
你在 templet 里写 checked 是没用的——Layui 渲染完会扫一遍,把所有 input[type="radio"] 的 checked 属性清空。它只认你数据对象里的某个字段值。
所以必须满足两个条件:
- 后端返回的数据每行带一个布尔或数字字段,比如
is_selected: true或status: 1 -
templet函数里根据该字段决定是否插入checked字符串:d.is_selected ? 'checked' : '' - 注意判断要严谨:后端若返回
1/0,就写d.status === 1;若返回字符串"true",得写d.status === 'true'
监听点击要用 form.on('radio(...)'),别用原生 click
你用 templet 输出的 radio 是原生标签,但只要它在 form 容器内、有 lay-filter、且调用了 form.render(),Layui 就能识别并绑定事件。原生 click 监听会漏掉某些触发场景(比如键盘空格选中),也不走 Layui 的事件流。
关键点:
- radio 标签上必须带
lay-filter="xxx",值和form.on('radio(xxx)')里的参数严格一致 - 必须在
layui.use(['form'], function(){...})内执行监听,且确保form.render()已调用(尤其动态渲染后) - 不要给每个 radio 单独加
lay-verify="required",验证规则只加在任意一个上即可,Layui 按name自动归组
表格里多行 radio 互斥失败?检查 name 是否真的相同
常见现象:点了第一行的 “是”,第二行的 “是” 也跟着选中了,或者根本无法切换。根本原因几乎全是 name 值不一致。
排查步骤:
- 打开浏览器开发者工具,看渲染后的实际
name属性 —— 注意有没有空格、大小写、下划线、或意外拼进了d.LAY_INDEX导致每行 name 都不同 - 如果真需要按行隔离(比如每行独立单选),那就别互斥,改用不同
name,但这时已不是“单选组”,而是多个独立控件 - 若要全局单选(整个表格只能选一行),所有 radio 的
name必须完全一样,且templet里别手误写成name="select_{{d.id}}" - 避免用
name="{{d.id}}"这类模板语法,Layui 的templet函数里应直接字符串拼接:'name="select_row"'
form.render()、字段名对不上、name 动态拼错,都会让 radio 表现异常。











