layui表格radio事件不触发的主因是type:'radio'配置错误:仅允许一列显式声明,不可混用checkbox或拼写错误,且需配合form.render()和正确name/value设置。

table.on('radio(filter)') 事件不触发?先看 type 配置对不对
单选框点击没反应,最常见原因是 type: 'radio' 没写对位置或数量。Layui 表格只认「且仅认」一列 type: 'radio',它必须显式出现在 cols 数组里,不能靠 templet 手写 <input type="radio"> 替代。
容易踩的坑:
-
cols里写了两列{type: 'radio'},会导致 UI 错乱、事件绑定失败,甚至控制台报Uncaught TypeError: Cannot read property 'checked' of undefined - 把
{type: 'radio'}和{type: 'checkbox'}混用在同一张表,radio事件直接失效 -
type: 'radios'或type: radio(漏引号)——Layui 不识别,渲染不出圆点,自然没点击响应 - 用了
fixed: 'left',但type: 'radio'不在固定列第一个位置,可能被遮挡或点击穿透
form 表单里的 radio 提交不校验?检查 name 和 value
Layui 表单验证对 radio 组是「整组感知」,不是单个控件独立生效。name 不统一、value 为空、或漏了 lay-verify="required",都会导致点击后无提示、提交也放行。
实操要点:
- 所有同组
radio的name必须完全一致(大小写、空格、拼写全敏感),例如统一用sex,别混用Sex或user_sex - 必须显式加
lay-verify="required",且只需加在任意一个radio上;写成required或required=""是 HTML5 原生属性,Layui 不读 -
value不能为空字符串,value=""或只有空格会被验证逻辑当作「未选中」处理 - 动态插入的
radio(比如 AJAX 加载后 append),必须立刻调用form.render('radio'),否则 Layui 初始化时根本没扫描到它们
点击行却无法选中?row 事件里 setRowChecked 失效
想实现「点击整行就选中单选框」,不能只监听 row 事件,还必须在回调里正确调用 setRowChecked,并注意版本兼容性。
关键细节:
-
table.on('row(filter)', function(obj){ obj.setRowChecked({type: 'radio'}); })是标准写法,但setRowChecked在2.9.9版本存在兼容问题:传type: 'radio'参数无效,需改用obj.setRowChecked(true)或升级到2.9.10+ - 不要在
done回调里用setRowChecked设置初始选中——翻页后下标会变,容易错位;稳妥做法是在done中给目标行对象加lay-checked="true"属性,再调table.checkStatus('filter')强刷 UI - 初始化默认选中不能靠原始数据加
checked: true字段,Layui radio 模式不支持该驱动方式
onclick 属性失效?别和 layui-form 冲突
如果直接在 <input type="checkbox"> 上写 onclick="xxx()" 却没反应,大概率是 class="layui-form" 干预了原生事件绑定流程。
解决办法很直接:
- 放弃
onclick属性,改用form.on('checkbox(filterName)', function(data){})监听,这是 Layui 推荐且稳定的事件入口 - 确保每个
radio或模拟单选的checkbox都带相同的name和唯一的value,并在lay-filter中指定统一标识 - 如果必须保留 onclick,得去掉
class="layui-form",但样式会丢失——这不是修复,是退让,不推荐
真正卡住人的地方往往不是语法错,而是配置前提没满足:表格里 type: 'radio' 少写或多写一个、表单里 name 差一个字母、form.render('radio') 忘了调……这些点不逐个过一遍,光查 JS 控制台是看不出问题的。











