Layui中单选必须仅用一列type: 'radio',由渲染引擎原生保证互斥;错误写法会导致不渲染或事件失效;唯一可靠数据入口是table.on('radio(filter)'),默认选中需通过数据字段+templet实现。

必须用 type: 'radio' 且只能有一列
排它性不是靠 JS 绑定事件模拟出来的,是 Layui 渲染时根据 type 值决定行为模式的。只要在 cols 里写了 {type: 'radio'},Layui 就会自动给这一列生成 name 相同、value 各异的 <input type="radio">,浏览器原生就保证单选互斥。
常见错误包括:
- 写了两列
type: 'radio'—— 表格直接不渲染或控制台报Cannot read property 'checked' of undefined - 把
type: 'radio'和type: 'checkbox'混在同一张表里 —— 事件监听失效,UI 错乱 - 写成
type: 'radios'或漏掉引号(type: radio)—— 渲染结果是空白列,table.on('radio(filter)')根本不会触发
table.on('radio(filter)') 是唯一可靠的数据入口
别去查 $('input[name="xxx"]').filter(':checked').val(),也别用 table.checkStatus(),这个方法只对 checkbox 有效。radio 模式下,只有 table.on('radio(filter)') 回调里的 obj.data 和 obj.value 是可信的。
-
obj.data是当前页被点中行的原始数据(仅含cols中定义的field) -
obj.value默认取该行lay-id或你传入的id字段值,是唯一标识 - 该事件只在用户点击圆点时触发;初始化默认选中、代码调用
setRowChecked()都不会自动触发,除非加callbackFlag: true
默认选中不能靠 checked 属性,得靠数据字段驱动
在模板里写 <input type="radio" checked> 没用,Layui 渲染时会清掉这个属性。真正生效的方式,是在原始数据里带一个布尔字段(比如 is_checked),然后用 templet 函数输出带状态的标签:
{ type: 'radio',
templet: function(d) {
return '<input type="radio" name="select_row" value="' + d.id + '"' + (d.is_checked ? ' checked' : '') + '>';
}
}
-
name必须一致,否则浏览器无法互斥;建议写死字符串,别拼d.id -
value必须有且唯一,后续取值全靠它;后端返回 1/0 数字时,判断写成d.is_checked === 1更安全 - 如果数据来自 AJAX,在
success回调里遍历一次设字段,别等table.render()完再操作 DOM
rowClickToCheck: true 不适用于 radio 排它场景
这个参数只对 type: 'checkbox' 列生效,且目的是“点哪行选哪行”,不是单选逻辑。它不会改变 radio 的渲染方式,也不会让 radio 圆点产生视觉反馈。如果你需要的是严格单选+点击整行触发,得自己监听 row 事件,再调 table.setRowChecked() 并手动维护单选状态 —— 这种做法绕开了 Layui 原生 radio 机制,容易和 table.on('radio(filter)') 冲突,不推荐。
真正要稳,就老老实实配一列 type: 'radio',用 templet 控制默认态,用 table.on('radio(filter)') 拿数据。所有花哨的替代方案,最后都绕不开这两条。


















