layui单选框怎么绑定id属性-Layui教程-PHP中文网

layui radio单选框需通过templet函数模板添加data-id属性，因cols配置不解析html属性；监听时须用:checked选择器获取dataset.id，重载后需在done回调中重新注入。

layui单选框怎么绑定id属性

layui radio 单选框怎么加 data-id 属性

不能在 cols 配置里直接写 data-id —— layui 列定义不解析 HTML 属性，写了也无效。真正起作用的是 templet 函数或字符串模板，它控制最终渲染的 DOM 结构。

用函数模板最稳妥：templet: function(d) { return '<input type="radio" name="selectRow" value="' + d.id + '" data-id="' + d.id + '">'; }
确保 d.id 真实存在，否则会报 Cannot read property 'id' of undefined
别用字符串模板拼 data-id 时混用引号，比如 templet: '<input type="radio" data-id="{{d.id}}">' 会失败——{{d.id}} 只在 laytpl 模板引擎中生效，而 radio 是原生 input，必须走 JS 字符串拼接
data-id 是为了后续用原生 JS 拿值，比如 tr.querySelector('input[type=radio]').dataset.id，不是给 layui 内部用的

为什么不能用 lay-id 替代 data-id

lay-id 是 layui 表格内部自动加在 <tr> 上的属性，只对表格行有效；radio 是独立 input 元素，不在 layui 的 <code>lay-id 管理范围内。你点 radio 时，事件回调里只有 obj.value（默认取 lay-id 或 id 字段），但这个值不等于 DOM 上的 data-id —— 如果你没显式加，就根本拿不到。

服务端返回的数据字段名如果是 user_id 而不是 id，obj.value 就会是 undefined，除非你在 render 时传 id: 'user_id'
data-id 可以和 value 不同，比如 value="1" 用于提交，data-id="U_001" 用于前端逻辑关联
如果要兼容旧版（如 2.7.x），lay-id 可能未正确注入到 tr 上，此时靠 data-id 更可靠

监听 radio 点击时如何读取 data-id

layui 的 table.on('radio(filter)', callback) 事件不提供 DOM 元素引用，只给 obj.data 和 obj.value。想读 data-id，得自己查 DOM：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

在回调里用 $(this).find('input[name="selectRow"]:checked').data('id')（jQuery）
或原生写法：document.querySelector('input[name="selectRow"]:checked').dataset.id
注意：不能用 event.target 直接取，因为 layui 渲染后 radio 可能被包裹、或有延迟，推荐用 :checked 选择器兜底
如果表格启用了分页，当前页可能没有目标数据，dataset.id 取出来是空的——这时得结合 table.cache['filter'] 查全量缓存

动态渲染 radio 后 data-id 丢失怎么办

调用 form.render('radio') 或 table.reloadData() 会清空手动加的 data-id，因为 layui 重绘时只认配置项，不保留你之前塞的 DOM 属性。

每次重载后，必须在 done 回调里重新遍历 tr 补 data-id：$('input[type=radio]').each(function(){ $(this).attr('data-id', $(this).val()); })
更高效的做法是：把 data-id 写进 templet，让每次渲染都自带，而不是事后补
避免用 innerHTML += 动态追加 radio —— 会导致已选状态丢失，且 data-id 不会被识别