单选题需用相同name属性实现互斥选择，name值必须完全一致；推荐label包裹radio提升体验；默认选中用checked但同组仅限一个；获取值用querySelector('input[name="q1"]:checked')?.value。
用 name 属性
单选题能“互斥选择”的核心不是靠 JS，而是浏览器原生行为：同一组 必须共享相同的 name 值。没设 name，或 name 值不一致，就变成多个独立的“单选框”，点一个不会取消另一个。
常见错误现象：
– 点击选项 A，再点选项 B，A 还是选中状态
– 控制台没报错，但逻辑完全失效
实操建议：
– 所有同题选项的 name 必须完全相同（区分大小写、空格、引号）
– 推荐用语义化名称，比如 name="q1" 或 name="user_gender"
– 不要用动态拼接出不同 name（如 name="q${i}"），除非你本意就是分组
用
只放 ，用户只能精准点击小圆圈；加上 后，整个文字区域都可点击，且屏幕阅读器能正确关联题目与选项。
实操建议：
– 推荐用包裹式写法：
<label><input type="radio" name="q1" value="a"> 选项 A</label>
– 避免用 for/id 绑定方式，除非 DOM 结构强制分离（易漏写 id 或拼错）
– 不要遗漏 value —— 提交表单或 JS 获取时全靠它，空字符串或未定义会导致取值困难
默认选中用 checked，但别在多题中重复设
checked 是布尔属性，存在即生效。如果一组里多个 radio 都写了 checked，浏览器只认第一个（HTML 规范行为），后续的会被忽略——但这会误导人，也增加维护成本。
使用场景：
– 初始状态需预设答案（如“性别”默认选“保密”）
– 表单重载时回填上次选择（此时应由 JS 控制，而非静态 HTML）
实操建议：
– 同一组内最多一个 checked
– 动态场景（如编辑表单）优先用 JS 设置：document.querySelector('input[value="b"]').checked = true
– 不要依赖 checked 来“修复”没设 name 的问题——那根本不是单选题
获取选中值别直接遍历所有 input，用 querySelector 更稳
新手常写循环判断每个 input.checked，但容易漏掉作用域（比如多个题目混在一起）、或被 disabled 项干扰。其实浏览器提供了更精确的定位方式。
实操建议：
– 获取某题答案：document.querySelector('input[name="q1"]:checked')?.value
– 返回 null 表示没选，避免非空判断出错
– 如果用表单提交，后端收到的就是 name 对应的 value 字符串，无需额外解析
– 注意：CSS 选择器中的 :checked 仅匹配当前已勾选的，不触发重排，性能无压力
真正容易被忽略的是语义一致性：同一份 HTML 里，name、value、label 文本三者得对齐业务含义。比如后台期望接收 status=active，前端却写了 value="启用"，后面排查时连日志都对不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
