单选按钮互斥的关键在于name属性必须完全一致（大小写敏感），value应唯一且有意义，用:checked伪类获取选中值，勿混淆checkbox与radio语义。

多个单选按钮互斥，只靠写 <input type="radio"> 不够——关键在 name 属性是否一致。只要 name 值完全相同（大小写敏感），浏览器就自动把它们当作一组，选一个，其余自动取消。

name 属性必须完全一致才能互斥

这是最常踩的坑：给每行表格里的单选按钮配了不同 name，比如 name="row1"、name="row2"，结果变成“每行都能选一个”，根本不是单选。

• name 值要一模一样，推荐用语义化名称，如 name="selectedItem" 或 name="paymentMethod"
• 大小写必须严格匹配：name="Option" 和 name="option" 是两组，互不影响
• 如果按钮分散在不同 <tr> 或嵌套 <code><div> 中，只要 <code>name 相同，依然互斥

  value 值必须唯一且有意义

  value 不只是随便填的字符串，它决定表单提交时发给后端的数据。重复的 value 不会报错，但后端无法区分用户到底选了哪个。

  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载
  • 每个 <input type="radio"> 的 value 应该唯一，例如 value="credit"、value="debit"
  • 避免用序号当 value（如 value="1"、value="2"），除非后端明确按数字索引处理
  • 如果某项需要默认选中，加 checked 属性，但同一组里只能有一个 checked

  用 JavaScript 获取和设置选中项

  原生 DOM 提供了简洁方式读写状态，不需要遍历所有 radio 元素。

  • 获取当前选中的值：document.querySelector('input[name="selectedItem"]:checked')?.value
  • 设置某一项为选中：document.querySelector('input[value="credit"]').checked = true
  • 注意：如果没任何项被选中，querySelector(...:checked) 返回 null，记得加可选链 ?.value
  • 不要用 getElementsByName 配合循环判断 checked——效率低，还容易漏 null 检查

  别混淆 checkbox 和 radio 的互斥逻辑

  type="checkbox" 没有原生互斥能力，哪怕 name 相同也无效。强行让 checkbox 互斥，必须靠 JS 手动控制 checked 状态——这不是“修复”，而是绕过语义做 hack。

  • 如果需求本质是“单选”，就老实用 type="radio" + 统一 name
  • 如果 UI 设计非要用开关样式，隐藏原生 radio，用 label + CSS 伪元素定制外观，保留语义和行为
  • 用 JS 强制 checkbox 互斥，会破坏表单验证、无障碍支持（如屏幕阅读器）、以及 required 属性行为

  最容易被忽略的是：name 值一旦写错（空格、大小写、拼写偏差），互斥就彻底失效，而且没有任何报错提示——你只会发现“怎么点来点去都能选”。调试时直接打开开发者工具，筛选所有 input[type="radio"]，一眼看 name 是否真的一致。