name相同的单选按钮在表格中未生效，根本原因是name属性值未完全一致（含大小写、空格等），或被js框架动态生成不同name；浏览器仅依据name完全相等判定同组排他性，与表格结构无关。
为什么 name 相同的单选按钮在表格里没生效？
表格本身不影响单选按钮逻辑，问题几乎都出在 name 属性没统一或被动态生成干扰。浏览器只认 name 值完全一致的 <input type="radio"> 为同一组，哪怕它们分散在不同 <tr> 或 <code><td> 里。
<p>常见错误：用 JS 框架（如 Vue/React）渲染时，<code>name 被绑定成带索引的字符串（如 "choice-0"、"choice-1"），导致每项 name 实际不同；或手写 HTML 时大小写不一致（Choice vs choice）。
- 确保所有同组单选按钮的
name属性值**完全相同**（包括大小写、空格、引号类型） - 避免用变量拼接
name，除非确认拼接结果恒定 - 检查浏览器开发者工具中渲染后的 DOM，直接看
name是否真的一致
如何让表格每行一个选项、但整表单选？
典型场景：表格列出多个配置项，用户只能选其中一项。关键不是“每行一个”，而是“所有单选按钮属于同一逻辑组”——这仅由 name 决定，与表格结构无关。
示例 HTML 结构：
| 选项 A | |
| 选项 B | |
| 选项 C |
-
name="plan"在三处保持一致，自然形成排他关系 - 不必给每个
<input>加id或关联<label></label>，但加了可提升可访问性 - 如果表格有分页或动态加载，新插入的
<input>必须沿用相同的name值，否则会创建新组
JavaScript 手动控制时容易忽略的细节
当需要通过 JS 触发选中或监听变化时，别只盯着 click 事件——单选按钮的“排他性”是浏览器原生行为，JS 干预不当反而会破坏它。
- 用
element.checked = true设置选中状态时，**不会自动取消同组其他项**，必须手动清空其他checked - 监听推荐用
change事件而非click，因为键盘操作（空格键）也会触发change，更健壮 - 获取当前选中值，直接查
document.querySelector('input[name="plan"]:checked')?.value，别遍历所有 - 注意表单重置（
<form></form>的reset()）会还原所有单选按钮到初始状态，若某项默认checked，它会被恢复
无障碍与样式适配的隐性坑
视觉上把单选按钮藏在表格单元格角落，不代表它就“安全”。屏幕阅读器和键盘导航依赖的是语义结构，不是 CSS。
- 每个
<input type="radio">应包裹在<label></label>内，或用for属性关联id，否则辅助技术可能无法读出选项含义 - 不要用
display: none隐藏单选按钮——这会让它完全不可访问；改用position: absolute; clip: rect(0 0 0 0)等无障碍友好的隐藏方式 - CSS 选择器如
input[type="radio"]:checked + label在表格里可能失效，因为兄弟元素（+）关系被<td> 或 <code><tr> 阻断，优先用 <code>:has()（需现代浏览器支持）或 JS 绑定类名排他性本质简单，但表格环境放大了命名一致性、动态渲染和可访问性这三个点的容错率——任一环节松动，用户就会发现能同时选中多个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
