单选按钮互斥依赖相同name属性；每行单选则各行name不同，全表单选则所有name相同；value需唯一标识单元格；label应一对一包裹input；js用queryselector获取checked值最可靠。
单选按钮必须共享同一个 name 属性才能互斥
HTML 中 <input type="radio"> 的互斥行为完全依赖于 name 属性值是否相同。如果每个单元格里的单选按钮 name 都不同，那就根本不是“单选”，而是多个独立开关——这是最常被忽略的前提。
正确做法是：同一行或同一列（取决于你要约束的逻辑范围）的所有单选按钮用相同的 name，比如 name="row-1" 或 name="choice-group"；不同行/列则用不同 name 值，避免跨行误取消。
- 若想“每行只能选一个”，每行设独立
name，如name="row-0"、name="row-1" - 若想“整表只能选一个”，所有按钮共用一个
name，如name="selected-cell" -
value必须唯一且有意义（比如value="A1"表示第1行第1列），方便 JS 读取时定位
表格单元格里放 radio 按钮的 HTML 结构要点
直接往 <td> 里写 <code><input type="radio"> 没问题，但要注意两点：一是 label 可选但强烈建议配对，二是不要把多个 input 套进同一个 label —— 这会导致点击任一文字都触发第一个 radio。
推荐结构：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<td>
<label>
<input type="radio" name="row-0" value="A1">
选项 A
</label>
</td>
- 每个
<td> 放一个 <code><input>+ 对应<label></label>，语义清晰、点击区域大 - 避免写成
<label><input><input></label>，这会让两个 radio 都被同时触发 - 如果不用
<label></label>，至少给input加id并用for关联外部 label，否则可访问性差 - 别用
document.getElementsByName("row-0")[0].value—— 它返回的是第一个元素的值，不管它有没有被选中 - 正确写法：
document.querySelector('input[name="row-0"]:checked')?.value，有就取值，没有就undefined - 如果表格动态生成，确保 DOM 渲染完成后再查询，否则
querySelector返回 null - 监听变化用
change事件，绑定在name对应的任意一个 radio 上即可（事件会冒泡，且 checked 状态已更新） - 加
style="width: 20px; height: 20px;"不够，要配合transform: scale(1.5)扩大视觉尺寸，同时用margin避免重叠 - 更稳妥的做法：隐藏原生 input（
opacity: 0; position: absolute;），用<label></label>的伪元素或背景图模拟按钮，点击 label 触发 input - 测试时真机点一点，别只靠鼠标 hover 判断——hover 和 click 在触屏设备上行为不同
JavaScript 读取被选中的 radio 值时容易踩的坑
用 document.querySelector('input[name="xxx"]:checked') 是最稳的方式，但前提是 name 值你清楚且没拼错。很多人用 getElementsByName 后忘了遍历判断 checked，结果拿到一堆未选中的元素。
移动端点击不灵敏？别忽略默认样式和 touch 区域
原生 radio 在某些 iOS 或 Android 浏览器上点击热区小，尤其缩放后更难点中。这不是 bug，是默认样式限制了点击响应范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
