radio单选按钮必须用name属性分组，name值完全相同时浏览器才将其视为一组并实现互斥选择；name区分大小写且需逐字符一致，不同组name必须不同；value决定提交值，label应绑定id提升体验；默认选中用checked属性；获取选中值应使用document.querySelector('input[name="xxx"]:checked')并判空。
radio 单选按钮必须用 name 属性分组
单选按钮不是独立工作的，浏览器靠 name 值识别哪些 <input type="radio"> 属于同一组。如果所有 radio 的 name 不同，那就变成多个互不干扰的“单选”，实际效果等同于多个复选框。
常见错误：只改了 id 和 value，漏写或写错 name，导致无法互斥选择。
-
name值必须完全一致（大小写敏感），例如都用name="gender" - 每项应配唯一
value，提交时只发送被选中项的value字符串 - 建议为每个
radio配合<label>，用for关联id，提升可点击区域和无障碍支持
<label><input type="radio" name="level" value="beginner"> 入门</label><br><label><input type="radio" name="level" value="advanced"> 进阶</label>
默认选中用 checked 属性，不要用 JavaScript 模拟
设置默认选项，直接在 HTML 中加 checked 属性即可，这是语义正确、兼容性好、且服务端渲染友好的方式。用 JS 在 DOM 加载后赋值 checked = true 容易造成闪烁或状态不同步。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
checked是布尔属性，写上即生效，无需checked="true" - 同一组中最多只能有一个
checked，多写也只以第一个为准 - 如果初始无默认项，就都不写
checked；不要写checked="false"——这反而会触发选中
<input type="radio" name="theme" value="dark" checked> 暗色<br><input type="radio" name="theme" value="light"> 亮色
获取 radio 选中值要用 querySelector 而非 getElementsByName
document.getElementsByName("xxx") 返回的是 HTMLCollection，不能直接取 .value；而 document.querySelector('input[name="xxx"]:checked') 直接返回当前选中的元素节点，安全可靠。
- 若没选中任何项，
querySelector(...:checked)返回null，需判空再取.value - 避免用
getElementsByName遍历判断checked，冗余且易出错 - 表单提交时，只有
checked的radio才会随 name/value 发送到服务端
const selected = document.querySelector('input[name="payment"]:checked');<br>if (selected) {<br> console.log(selected.value); // 如 "credit"<br>} else {<br> console.log('未选择支付方式');<br>}
注意移动端 click 延迟与 focus 样式丢失问题
在 iOS Safari 等环境下，radio 的原生 click 事件可能有约 300ms 延迟；同时，某些 CSS 重置库会清掉 input[type="radio"] 的 :focus 样式，导致键盘导航用户无法感知焦点位置。
- 用
<label>包裹input可规避 click 延迟（触发 label 的 click 即等于触发 input） - 手动添加
input[type="radio"]:focus { outline: 2px solid #007bff; }确保可访问性 - 不要依赖
change以外的事件监听，比如click可能触发多次或时机不准
radio 表单交互看似简单，但 name 分组、checked 初始化、DOM 查询方式、移动端响应这几个点，任何一个疏忽都会让“单选”逻辑失效或体验断裂。
