单选框必须用相同name属性才能互斥；需用label扩展点击区域；JS获取时须判空；移动端需加touch-action: manipulation优化响应。
单选框必须用 name 统一才能互斥
HTML 表格里放单选框，最常犯的错是每个 <input type="radio"> 的 name 属性值不一致，结果点来点去都能选中——根本不是“单选”。浏览器只靠 name 判断一组单选框，同名才互斥。
实操要点：
-
name值必须完全相同（大小写敏感），比如都叫"row_selection" - 每项必须有唯一
value，提交时后端靠它识别选中哪行 - 推荐在
<td>里直接写，别套多余标签干扰布局 - 加
checked属性可预设默认项，但同一name下只能有一个
<table>
<tr>
<td><input type="radio" name="row_selection" value="1"></td>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td><input type="radio" name="row_selection" value="2"></td>
<td>李四</td>
<td>30</td>
</tr>
</table>
表格行点击区域太小？用 label 扩展点击范围
纯 <input> 点击区域窄，用户容易点不准。把单选框包进 <label>，整个单元格或整行就能触发选择。
关键点：
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
<label>必须包裹<input>，或者用for属性关联id - 避免在
<label>里再嵌套其他交互元素（如按钮），可能引发事件冲突 - 如果想整行可点，给
<tr>加onclick不可靠（会干扰右键、键盘操作），优先走语义化<label>
<tr> <td><label><input type="radio" name="row_selection" value="3"> 选中这行</label></td> <td>王五</td> <td>28</td> </tr>
JavaScript 获取选中行的 value 很简单，但要注意空值
提交前想读取用户选了哪一行？别遍历所有 input，直接用 document.querySelector 找已选中的那个。
常见陷阱：
-
document.querySelector('input[name="row_selection"]:checked')返回null时代表没选，必须判空 - 不要用
getElementsByName配循环——效率低且易漏掉未选状态 - 如果表格动态增删行，确保新插入的
input也带对的name和value
const selected = document.querySelector('input[name="row_selection"]:checked');
const selectedValue = selected ? selected.value : null;
移动端触摸体验差？加 touch-action: manipulation
在 iOS Safari 或部分安卓浏览器里，单选框响应慢半拍，甚至要点两次。这不是 JS 问题，是浏览器默认延迟处理以区分双击和滚动。
解决方法很简单：
- 给所有单选框加内联样式
style="touch-action: manipulation;" - 或统一写 CSS：
input[type="radio"] { touch-action: manipulation; } - 这个属性不会影响桌面端，只优化触控设备响应
没有这个声明，用户点完要等 300ms 才反馈，体验明显卡顿。
表格里单选框看着简单，但name 一致性、label 包裹方式、JS 读值判空、移动端延迟——四个点漏一个，用户就会觉得“怎么总不灵”。 
