单选按钮必须用相同name属性才能实现互斥；name值需完全一致（大小写敏感），每项value唯一，配合label提升可访问性，用querySelector(':checked')高效获取选中值。
单选按钮必须用 name 统一才能互斥
HTML 表格里放单选按钮，光靠 <input type="radio"> 不够——浏览器只认 name 相同的按钮为一组。哪怕它们在不同 <tr> 或 <td> 里，只要 name 一样，选一个就会自动取消另一个。
常见错误是给每个按钮配了不同 name（比如 name="row1"、name="row2"），结果变成“每行都能选一个”，完全失去单选意义。
-
name值必须完全一致（大小写敏感），例如全部设为name="selectedRow" - 每项必须有唯一
value，方便 JS 或后端识别选中哪一行 - 建议配合
id+for属性提升可访问性，比如<label for="r1">选项A</label><input id="r1" type="radio" name="selectedRow" value="A">
表格结构不影响单选逻辑，但影响语义和可维护性
单选按钮可以放在任意 <td> 里，甚至跨行、跨列，只要 name 一致就行。但实际开发中，通常每行一个选项，且按钮和对应数据在同一行，便于用户理解。
别把按钮塞进 <th>（除非是全选/反选这类控制），也不建议用 <div> 包裹再塞进 <td>——会增加 DOM 深度，JS 定位更绕，还可能破坏表格语义。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<tr><td><input type="radio" name="selectedRow" value="1"></td><td>姓名</td><td>年龄</td></tr> - 避免嵌套：不要写成
<td><div><input ...></div></td>，没好处反而干扰样式继承 - 如果某行禁用选择，加
disabled属性即可，不用删name
用 JavaScript 获取选中值时，别遍历所有 radio
直接用 document.querySelector('input[name="selectedRow"]:checked') 最快最准。遍历所有 input[type="radio"] 再判断 checked 是典型低效写法，尤其表格行数多时明显卡顿。
- 查不到返回
null，记得判空：const el = document.querySelector('input[name="selectedRow"]:checked'); if (el) { console.log(el.value); } - 监听变化用
change事件，绑定到父容器（如<table>）比逐个绑更轻量：table.addEventListener('change', e => { if (e.target.type === 'radio' && e.target.name === 'selectedRow') { ... } }); - 表单提交时，只有被选中的那个
value会作为selectedRow字段发给后端
移动端点击区域小，必须扩大可触碰范围
原生 <input type="radio"> 默认点击热区极小，手指点不准就容易误操作。不能只靠 CSS 改 width/height，那只是视觉放大，实际可点击区域没变。
- 正确做法：用
<label>包裹input，或用for关联，整个 label 区域都响应点击 - CSS 配合：
label { display: block; padding: 8px 12px; }，再加cursor: pointer - 别给
input自身设opacity: 0后用伪元素模拟——会破坏屏幕阅读器支持，也增加无障碍测试失败风险
name 一致性、label 包裹、:checked 查询这三件事漏掉任何一项，都会让功能看起来“差不多”，实则不可靠。 
