layui单选框在数据表格中如何赋值

在前端开发内容学习中，layui单选框在数据表格中如何赋值是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

layui表格中radio无法选中或赋值失败，核心原因是未统一name属性且未调用form.render('radio')触发渲染；分页时需在jump回调中重新渲染，获取值应监听form.on事件而非直接查DOM。

layui 表格里 radio 渲染后无法选中或赋值失败？核心是没绑定 name 且未触发渲染

layui 的 table 渲染时不会自动解析 input[type="radio"]，直接写 HTML 不会变成可交互的单选框。必须用 lay-form 触发表单渲染，且每个单选组的 name 必须一致 —— 否则浏览器认为它们互不相关，无法单选。

• 表格列模板中写 <input type="radio" name="status" value="1"> 是无效的，得配合 lay-submit 或手动调用 form.render('radio')
• name 值不能带变量（如 name="status_{{d.id}}"），否则每行都是独立单选组，永远只能选一个但不是“一组里选一个”
• 如果表格启用了 page: true，翻页后新加载的行需要再次调用 form.render('radio')，否则新行的 radio 不响应

如何在 table.render() 中正确插入并初始化单选框

推荐在 cols 中用 templet 返回带 name 的 radio，并在 done 回调里统一渲染表单。不要依赖 init 阶段自动处理。

• 模板写法示例：templet: function(d) { return '<input type="radio" name="selectId" value="' + d.id + '">'; }
• 在 done 回调里加 layui.form.render('radio', 'your-table-container-id');，确保容器内所有 radio 被识别
• 若表格有分页，把 form.render() 提到 page: { jump: function() { ... } } 的 jump 函数里，否则下一页的 radio 不生效

怎么获取当前选中的单选框值？别用 $('input[name="xxx"]:checked') 直接查

因为表格可能重绘、分页、异步加载，DOM 状态容易滞后。更可靠的方式是监听 radio 的 change 事件，或在提交前遍历当前页数据。

• 监听方式：form.on('radio(selectId)', function(data){ console.log(data.value); }); —— 注意事件名必须和 name 值一致
• 批量取值时，先用 table.cache['yourTableId'] 拿到当前页原始数据，再结合 radio 的 value 匹配，比查 DOM 更稳定
• 如果用户切换了页码但没重新触发 form.render()，:checked 可能返回空，此时 form.on 事件也不会触发

多行单选如何保证“整表唯一”？layui 本身不支持跨页单选约束

layui 的 radio 天然按 name 分组，所以“整表唯一”需自行控制逻辑：要么限制只能在当前页操作，要么用 JS 手动取消其他页已选中的状态（不推荐），或者换用 checkbox + 单选逻辑模拟。

• 最实用做法：把单选行为限定在当前页，提交前校验 table.cache 中哪一行的 radio 被标记为选中（比如加个 selected: true 字段）
• 避免用全局 name="selectId" 跨页共享 —— 分页后旧 DOM 被销毁，新 DOM 的 radio 会重置，导致“看似选中实则丢失”
• 如果真要跨页记忆，得自己维护一个全局变量记录选中行的 id，并在每次 render 后手动设置对应 radio 的 checked 属性并再次 form.render('radio')

实际写的时候，最容易漏的是分页后的 form.render() 和 name 的一致性。radio 在表格里不是“写出来就能用”，它是个需要持续维护状态的组件。