layui单选框在数据表格中如何赋值-Layui教程-PHP中文网

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

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

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 不响应

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

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

下载

模板写法示例：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 不生效

因为表格可能重绘、分页、异步加载，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 的 radio 天然按 name 分组，所以“整表唯一”需自行控制逻辑：要么限制只能在当前页操作，要么用 JS 手动取消其他页已选中的状态（不推荐），或者换用 checkbox + 单选逻辑模拟。

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