单选按钮互斥依赖name属性一致，刷新后状态保留需HTML中预设checked或JS显式设置el.checked=true，获取选中值应使用querySelector而非遍历。

单选按钮 name 属性必须一致才能互斥

浏览器只靠 name 判断哪些 <input type="radio"> 属于同一组。如果漏写、拼错或动态生成时 name 不统一，就会出现多个选项可同时选中的假象。

常见错误现象：页面刷新后状态丢失，或 JS 检查 document.querySelector('input[name="gender"]:checked') 总返回 null。

• 所有同组单选按钮的 name 值必须完全相同（包括大小写和空格）
• 避免用变量拼接 name 时引入不可见字符，比如模板字符串里多出换行或制表符
• 服务端渲染时注意前后端 name 保持一致，否则表单提交字段名对不上

刷新后保留选中状态靠 value + checked 属性

浏览器原生会根据 DOM 中是否含有 checked 属性来恢复单选状态，但这个属性不能靠 JS 动态加——必须在 HTML 加载时就存在，或者用 JS 在 DOMContentLoaded 后显式设置 input.checked = true。

使用场景：用户填了一半表单刷新页面，期望已选的 radio 还在；或者从详情页回退到编辑页，需要还原上次选择。

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 服务端渲染时，直接输出带 checked 的标签：<input type="radio" name="level" value="pro" checked>
• 纯前端应用，在初始化时读取 localStorage 或 URL 参数，再匹配 value 并设置 checked
• 不要用 setAttribute('checked', 'checked')，这只会写入属性但不触发状态更新；用 el.checked = true 才可靠

JS 获取当前选中值要用 querySelector + value

很多人误以为遍历所有 radio 然后检查 checked 最稳妥，其实没必要。浏览器保证每组最多一个 checked，所以直接查第一个匹配项就行。

性能影响：遍历 N 个 radio 是 O(N)，而 querySelector 是浏览器原生优化过的，基本是 O(1)。

• 正确写法：document.querySelector('input[name="theme"]:checked')?.value
• 如果没选中，上面表达式返回 undefined，别忘了做空值判断
• 避免用 getElementsByName 配合 for 循环——它返回的是 HTMLCollection，不是数组，且没有 find 方法
• Vue/React 等框架中，优先用响应式数据绑定，而不是手动查 DOM

移动端点击区域小导致误操作

<input type="radio"> 默认点击热区只有圆点本身，手指点不准就白点，用户觉得“点不动”。这不是 bug，是 CSS 缺失导致的交互缺陷。

容易被忽略的地方：很多项目只给 label 加了样式，却没把 label 和 input 正确关联，或者用了伪元素但没扩展点击范围。

• 必须用 for 属性绑定 label 和 input 的 id，或把 input 包在 label 内部
• 给 label 设置 display: block 和足够 padding（至少 12px），让整个文字区域都可点
• 避免用 pointer-events: none 在父容器上，它会禁用所有子元素的点击

表单状态保留的关键不在 JS 多复杂，而在 name 是否对得上、checked 是否在正确时机写入、以及用户能不能真正点中——这三点漏掉任意一个，都会让用户觉得“刚才明明选了，怎么又没了”。