单选按钮组必须使用相同name属性才能实现互斥选择；label需通过嵌套或for绑定input；默认选中用checked而非selected；读取选中值应使用document.querySelector('input[name="xxx"]:checked')。
单选按钮组必须用相同 name 属性
浏览器只认 name 相同的一组 <input type="radio"> 为互斥选项。如果漏写或拼错 name，就会变成多个独立单选按钮，无法实现“选一个、其他自动取消”的行为。
常见错误：复制粘贴时改了 id 却忘了同步改 name；或者用不同命名（如 q1_a、q1_b）试图“区分选项”，结果失去单选逻辑。
-
name值建议语义化，比如问卷第3题可设为name="q3" - 每个
radio必须有唯一value，提交时后端靠这个值识别用户选择 -
id可以各不相同（推荐），用于关联<label>，提升点击区域
label 标签必须正确绑定 radio 才能点文字选中
只写 <label>选项A</label> 是无效的——文字点击不会触发单选。必须通过 for 属性或嵌套方式建立与 input 的绑定关系。
推荐用嵌套写法，简洁且不易出错：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<label><input type="radio" name="q5" value="agree"> 同意</label> <label><input type="radio" name="q5" value="disagree"> 不同意</label>
如果用 for，要确保 for 值等于对应 input 的 id：
<input type="radio" name="q5" value="agree" id="q5_agree"> <label for="q5_agree">同意</label>
默认选中用 checked 而不是 selected
selected 是 <option> 的属性，对 radio 完全无效。设默认选项只能用 checked，且同一 name 组里最多只有一个生效。
- 不要写
checked="true"或checked="checked"，直接写checked即可 - 服务端渲染时，根据业务逻辑动态加
checked，比如用户回填已答问卷 - JavaScript 动态设置默认值，应操作
element.checked = true，而非修改属性字符串
获取用户所选值要用 querySelector + name 选择器
不能遍历所有 radio 再判断 checked，太冗余。现代浏览器支持直接按 name 获取已选中的那个：
const selected = document.querySelector('input[name="q7"]:checked');
const value = selected ? selected.value : null;
注意点：
- 如果用户没选任何项，
querySelector返回null，必须判空再取value - 不要用
getElementById或getElementsByName，前者需要提前知道 id，后者返回 NodeList 需额外过滤 - 表单提交前校验时，可统一用此方式批量检查各题是否作答
name 属性是单选组的“开关”，label 绑定是体验底线，checked 是默认状态的唯一合法写法，而 :checked 选择器是读取结果最稳的方式——这四个点漏掉任意一个，问卷逻辑就可能出岔子。
