radio按钮不互斥因name属性不一致；label未绑定导致点击文字无效；默认选中用checked而非defaultChecked；获取值应直接查:checked伪类并判空。
radio 按钮不互斥？检查 name 属性是否一致
html 单选按钮（<input type="radio">）能互斥选择的前提，是同一组内的所有按钮共享完全相同的 name 值。浏览器只认 name，不看 id、class 或位置关系。
常见错误现象：
– 点击一个 radio，其他同组选项没取消
– 控制台无报错，但表单提交时只拿到最后一个选中的值
– 使用 JS 获取 document.querySelectorAll('input[name="xxx"]') 返回空数组或数量不对
-
name值必须严格相等：大小写、空格、引号类型（双引号/单引号）都要一致 - 不同分组必须用不同
name，比如用户性别用name="gender"，订阅偏好用name="newsletter" - 不要依赖
id实现分组——id只用于锚点或 JS 定位，对 radio 行为零影响
label 标签没绑定？点击文字无法触发选择
用户习惯点击文字选中 radio，但若 <label></label> 和 <input> 之间没建立关联，点击就无效。这不是 bug，是 HTML 规范行为。
使用场景：
– 表单可访问性要求（屏幕阅读器依赖 label 关联）
– 移动端触控面积太小，纯 input 点击困难
- 推荐写法：把
<input>包在<label></label>内，无需for和id<label><input type="radio" name="theme" value="dark"> 深色模式</label>
- 备选写法：用
for属性绑定id，此时id必须唯一且与for值完全匹配 - 避免写法：label 和 input 分开、无任何关联；或多个 radio 共用同一个
id（违反 HTML 唯一性）
初始状态怎么设默认选中？用 checked 而非 defaultChecked
HTML 中设置默认选中项，只用 checked 属性。JS 动态操作时才涉及 defaultChecked，它只是反映初始 HTML 是否写了 checked，不能用来切换状态。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
性能 / 兼容性影响：
– checked 是布尔属性，写上即生效，无需 checked="true"
– 服务端渲染或静态 HTML 场景下，漏掉 checked 就没有默认值
- 正确写法：
<input type="radio" name="size" value="m" checked> - 错误写法：
<input type="radio" name="size" value="m" checked>（冗余，部分旧浏览器可能误判） - JS 修改时用
element.checked = true，不是element.defaultChecked = true
获取选中值总为空？别遍历所有 radio
直接查 document.querySelector('input[name="xxx"]:checked') 最快最稳。遍历所有再判断 checked 是典型低效写法，还容易漏处理 null。
常见错误现象：
– JS 报错 Cannot read property 'value' of null
– 表单提交前校验时，始终拿不到值，尤其当用户还没点过任何选项
- 安全获取方式：
const selected = document.querySelector('input[name="plan"]:checked');<br>const value = selected ? selected.value : null; - 注意：CSS 伪类
:checked在 IE8+ 支持良好，无需 polyfill - 如果后端要求“未选时传空字符串”，记得手动 fallback，因为
selected为 null 时不会自动转成空串
name 属性拼错、label 绑定失效、checked 写法多余、JS 查询没判空——这四点占了 radio 实际问题的八成。细节看着琐碎，但改完立刻见效。
