单选按钮默认选中需显式添加checked属性，同一name组仅一个可checked；服务端应动态渲染checked，js设置易因dom未就绪或框架冲突失效；react中checked需配合onchange，defaultchecked仅用于初始化；name属性缺失或不一致将导致单选逻辑失效。
如何用 checked 属性设置单选按钮默认选中
单选按钮组（<input type="radio">）没有全局默认值机制，必须显式给某个选项加 checked 属性才能让它初始被选中。不写这个属性，所有按钮默认都不选中——哪怕它们 name 相同、value 合法。
常见错误是以为只要 value 匹配后端数据就能“自动回填”，但 HTML 渲染时完全不读取服务器或 JS 变量，只看有没有 checked 这个布尔属性。
-
checked是布尔属性，写上即生效，无需赋值（checked="true"或checked="checked"都多余，但不报错） - 同一
name组里只能有一个checked，浏览器会自动取消其他同名项的选中状态 - 如果服务端返回了预设值（比如用户上次选的是
gender="female"），需在渲染 HTML 时动态插入checked，而不是靠 JS 补充（否则可能闪动或被表单验证拦截）
为什么用 JS 设置 checked 容易失效
直接用 JS 操作 document.querySelector('input[value="male"]').checked = true 看似可行，但在以下场景会出问题：
- DOM 尚未加载完成就执行（忘记等
DOMContentLoaded） - 多个同名 radio 共存时，JS 执行顺序导致旧的
checked没被清除，出现多个选中（浏览器实际只允许一个，但 JS 赋值逻辑混乱） - 表单用了框架（如 Vue/React）做响应式绑定，手动改 DOM 属性会和内部状态冲突
更稳妥的做法：服务端模板（如 Jinja、EJS）或构建时根据数据决定哪个 radio 加 checked；纯前端场景下，确保 JS 在 DOM ready 后执行，并统一通过 name 获取集合再设值：
const radios = document.querySelectorAll('input[name="theme"]');<br>radios.forEach(radio => {<br> if (radio.value === 'dark') radio.checked = true;<br>});
checked 和 defaultChecked 的区别（React 场景）
在 React 中，checked 是受控属性，必须配合 onChange 使用，否则会报 warning；而 defaultChecked 是非受控属性，仅用于初始化，之后由用户交互控制。
- 想让组件首次渲染时默认选中某项，且后续由 React 状态管理 → 用
checked={selectedValue === 'option1'} - 只是初始化选中，之后完全交给浏览器管理（比如简单表单不走 React state）→ 用
defaultChecked - 混用
checked但没写onChange，控制台会提示 “You provided a `checked` prop to a form field without an `onChange` handler”
注意 name 属性缺失导致默认值无效
单选按钮组依赖 name 属性来建立“互斥关系”。如果漏写 name，即使写了 checked，每个按钮也独立工作，无法实现单选逻辑，更谈不上“默认值”。
- 检查所有 radio 的
name是否拼写一致（大小写敏感） - 避免用动态生成的
name（如name="q${index}"）导致组内 name 不同 - 表单提交时，只有同名且被选中的那个 radio 的
value会被发送，name 不一致等于分成了多个独立字段
最常被忽略的其实是服务端和前端 name 值不一致——比如后端期待 name="category"，前端写了 name="cat"，这时哪怕 checked 正确，提交的数据也根本到不了对应字段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
