同名 radio 按钮构成互斥组，浏览器仅允许一项默认选中，多个 checked 时只保留第一个；解决方法是为每组设置唯一 name，动态生成时需绑定上下文标识，避免重名导致覆盖或失效。
radio 按钮组名相同但值不同，为什么只有一项能被默认选中？
因为同名 name 的 <input type="radio"> 构成一个互斥组，浏览器强制只允许其中一项被选中——这是 HTML 规范行为，不是 bug。如果你写了多个 checked，浏览器会忽略除第一个外的所有 checked 属性。
如何让不同 radio 组各自独立控制默认选中态？
关键在 name 属性必须唯一 per 组。常见错误是复制粘贴时漏改 name，导致本该分离的组被合并。例如：
<!-- ❌ 错误：两组共用 name="theme" --> <input type="radio" name="theme" value="light" checked><input type="radio" name="theme" value="dark"><p><input type="radio" name="theme" value="compact" checked><input type="radio" name="theme" value="spacious"></p>
正确做法是为每组分配不同 name：
<!-- ✅ 正确：分组命名清晰 --> <!-- 主题选择 --> <input type="radio" name="ui-theme" value="light" checked><input type="radio" name="ui-theme" value="dark"><p><!-- 布局选择 --> <input type="radio" name="ui-layout" value="compact" checked><input type="radio" name="ui-layout" value="spacious"></p>
-
name是分组唯一标识，不是语义标签，不能复用 - 服务端接收时也按
name键取值，重名会导致覆盖 - 若用 JS 动态生成，确保每次生成的
name与上下文匹配（比如加前缀或 ID 后缀）
后端渲染时多个 radio 组默认值冲突怎么办？
典型场景：模板引擎（如 Jinja2、Twig、EJS）循环输出多组 radio，但所有组都用了硬编码 name="option"，且每个组都想设默认值。此时仅靠 checked 属性无法区分。
解决思路是动态生成 name 和比对逻辑：
<!-- 示例：EJS 中按 sectionId 区分 -->
{ %>
- 绝对避免在循环内写死
name，必须带唯一上下文标识 - 默认值判断必须基于当前组的数据源，不能全局查
default - 如果用 React/Vue 等框架，
name应绑定到组件实例或 prop，而非静态字符串
用 JavaScript 手动设置默认选中时容易踩的坑
有人试图用 document.querySelector('input[value="x"]').checked = true 覆盖默认态，但若没限定组范围，可能误操作其他组的 radio。
- 务必加
name限定：document.querySelector('input[name="ui-theme"][value="dark"]') - 不要依赖顺序或索引，
querySelector只返回第一个匹配项，而 radio 组里可能有多个同 value（虽不推荐，但合法） - DOM 渲染完成后再执行，否则元素可能未挂载；可用
DOMContentLoaded或requestIdleCallback - 注意表单重置（
<form></form>的reset()）会清空 JS 设置的checked，如需持久化得监听reset事件再恢复
name 冲突是最隐蔽也最常被忽略的问题，它不报错，只静默失效——检查 DOM 里的 name 值，比调试 JS 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
