单选框必须用相同name属性才能实现互斥选择，name值需完全一致且大小写敏感；每行独立选项组应使用不同name，value须具语义；默认选中应由HTML直接声明checked属性；JS取值应按name精准定位而非遍历所有单选框。
单选框必须用 name 统一才能互斥选择
HTML 表格里放单选框，最常犯的错是每个 <input type="radio"> 的 name 属性值不一致，结果所有框都能同时选中——这根本不是“单选”，只是多个独立开关。
真正实现单选，必须让同一组选项的 name 完全相同。比如表格每行代表一个用户，你想让用户从“启用/禁用”中二选一，那就给所有该列的单选框设成 name="status"。
常见错误现象：
• 点击一个，其他不取消
• 浏览器控制台没报错，但逻辑失效
• 表单提交后只拿到最后一个被点的值（其实是浏览器随机取了一个，因为 name 不统一导致分组失败）
-
name值必须字符串完全一致，大小写敏感（status≠Status） - 建议用语义化名称，如
name="user_role"、name="payment_method" - 不要用动态生成的 ID 或索引当
name，比如name="radio_1"会直接破坏单选逻辑
表格中每行一个选项组，value 要有意义
如果表格是展示多条记录（如用户列表），而你想让每行各自独立选择（比如每行选“通过/拒绝”），那每行应是**独立的单选组**，即每行用不同的 name。这时 value 就特别关键：它不是随便填的，而是后端或 JS 读取时唯一依赖的数据标识。
使用场景举例：审批列表页，每行对应一个申请，两个单选框分别代表“同意”和“驳回”。用户只能二选一，提交时需知道“第3行选了驳回”。
立即学习“前端免费学习笔记（深入）”；
- 给每行设置唯一
name，例如name="decision_123"（123 是该行数据 ID） - 两个单选框的
value应为明确语义值，如value="approve"和value="reject"，别用"1"/"0"这类无意义数字 - 务必加
id+label关联，提升可访问性与点击区域（<label for="radio-approve-123">同意</label>）
用 checked 控制默认选中项，别靠 JS 模拟
初始化时哪一项该被选中，应该由 HTML 直接声明，而不是等页面加载完再用 JS click() 或设 checked = true。后者在表单重置、SSR、或某些框架（如 Vue 的 v-model 绑定前）下容易出竞态问题。
错误做法：<input type="radio" name="role" value="admin"> → 无默认，用户可能漏选<script>document.querySelector('[value="admin"]').checked = true;</script> → 延迟生效、不可服务端渲染
- 服务端渲染或静态 HTML 中，直接写
checked属性（无需checked="checked"，布尔属性有即真） - 如果数据来自接口，应在模板拼接阶段就判断并插入
checked，而不是 DOM 渲染后再操作 - 注意：同一
name组内最多只能有一个checked；若多个都写了，浏览器只认第一个
获取选中值时，别遍历所有 input[type="radio"]
很多人写 JS 取值时，习惯 document.querySelectorAll('input[type="radio"]') 然后循环判断 checked，这在表格行数多时效率低，且容易拿错组。正确方式是按 name 精准定位。
示例：想取 name="status" 这一组当前选中的 value：
const selected = document.querySelector('input[name="status"]:checked');
const value = selected ? selected.value : null;
性能与兼容性影响：
• querySelector 比 querySelectorAll + 循环快得多，尤其在百行表格中
• :checked 伪类 IE9+ 支持良好，不用额外 polyfill
• 如果用 jQuery，$('input[name="status"]:checked').val() 同样简洁
- 避免用
getElementsByName，它返回 HTMLCollection，且对动态插入节点响应不一致 - 表单提交时，只要
name正确，浏览器自动只提交被选中的那个value，无需手动收集 - 如果某组完全没选，提交时该
name不会出现在 FormData 中——这点后端要兜底处理
name 分组、value 语义、默认状态声明、以及 JS 取值路径，四个地方任意一个错，都会导致选择逻辑断裂。尤其是多人协作时，很容易有人把 name 写成动态变量拼接，或者漏掉 checked 导致必填项无声失效。 
