单选框必须用相同name属性才能互斥；需用label包裹或for/id关联提升点击体验；JS获取时应使用querySelector加name选择器；移动端需通过label的padding和touch-action优化。
单选框必须用 name 统一组名才能互斥
HTML 表格里放单选框，最常犯的错是每个 <input type="radio"> 的 name 属性值都不一样。结果点来点去都能选中——根本不是“单选”，只是多个独立开关。
真正实现单选，所有选项的 name 必须完全一致。浏览器靠这个字段识别“属于同一组”。表格行之间不影响，只要 name 相同，跨 <tr> 也能互斥。
<ul>
<li>
<code>name 值建议语义化，比如 name="user_role"，别用 name="r1" 这种无意义命名
checked（可选），否则初始状态全未选，用户可能误以为没加载成功value，提交表单时后端靠它区分选项，空字符串或默认值容易引发逻辑错误表格单元格里写 <input> 要注意对齐和可点击范围
直接把 <input type="radio"> 塞进 <td> 里，视觉上容易显得局促、点击区域小。用户点文字旁边却点不中，体验差。
<p>解决办法很简单：给单选框加 <code><label></label> 包裹，或者用 for 关联。这样点文字就等于点按钮，不用精准戳圆圈。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 推荐写法：
<td><label><input type="radio" name="status" value="active"> 启用</label></td> - 如果 label 和 input 分开（比如 input 在 td，label 在相邻 td），必须用
id/for配对：<input id="opt1" type="radio" name="status" value="active">+<label for="opt1">启用</label> - 避免在
<td> 上设 <code>text-align: center却忘了vertical-align: middle，否则单选框上下偏移明显JavaScript 拿不到选中的值？检查是否漏了
value或拼错name用 JS 获取选中项时，常见错误是循环遍历所有
input[type="radio"]，却没过滤同组，或者用document.querySelector('input[name="xxx"]:checked')返回 null —— 其实就是name写错了，或者压根没一个被选中（包括没设checked且用户还没点）。- 安全写法：
const selected = document.querySelector('input[name="category"]:checked'); const value = selected ? selected.value : null; - 不要用
getElementsByName然后手动遍历判断checked，效率低还易漏undefined判断 - 如果表格动态生成（比如 AJAX 渲染），确保 JS 执行时机在 DOM 插入之后，否则查不到元素
移动端点选困难？别忽略
min-width和touch-action在手机上，原生单选框太小，手指点不准。CSS 不处理的话，用户要反复尝试，甚至放大页面。
- 给
input[type="radio"]加min-width: 24px; min-height: 24px;（注意：部分安卓浏览器会忽略，所以更可靠的是改label的 padding） - 推荐方案：对包裹它的
label设置padding: 8px 12px;，既扩大热区，又不破坏布局 - 某些 iOS 页面滚动时误触发点击，加
label { touch-action: manipulation; }可缓解
表格里单选框看着简单，但 name 一致性、label 关联、JS 获取时机、移动端适配这四点，漏一个就出问题。尤其多人协作时，
name命名不统一最容易埋坑。 - 安全写法：
