HTML单选按钮初始选中态仅由checked属性存在与否决定，与JS的.checked、CSS类或defaultChecked无关；即使写成checked=""或checked="false"，只要存在即默认选中。
用 checked 属性设初始选中，不是 JS 属性也不是 CSS 类
HTML 单选按钮的初始状态完全由 HTML 中是否声明 checked 属性决定，和 JavaScript 的 .checked 属性、CSS 伪类、defaultChecked 都无关。浏览器解析 DOM 时只看这个布尔属性是否存在——哪怕写成 checked="" 或 checked="false"，只要存在，就视为默认选中。
- 正确写法：
- 错误写法：
（defaultChecked是 JS 只读属性，不能写在 HTML 里） - 更隐蔽的错：
（加 class 不改变实际选中态，表单提交时不会被包含）
同一 name 组里只能有一个 checked，否则行为未定义
多个同名 name 的 才构成互斥组；但若你在服务端模板或手写 HTML 时不小心给两个都加了 checked，浏览器会按文档顺序取第一个生效，后一个被忽略——你可能在测试时发现“明明写了 checked 却没选中”，其实是因为前一个兄弟节点也带了该属性。
- 确保模板逻辑只对一个选项插入
checked，比如在 Vue/React 中用v-model或value+onChange控制，而不是靠条件拼接checked - 大小写敏感：
name="Color"和name="color"是两组，别混用 - 如果用了 SSR（如 Next.js/Nuxt），服务端渲染出的
checked必须与客户端初始 state 一致，否则 hydration 失败，页面可能闪烁或交互异常
JS 动态设置选中态时，别只改 .checked 就完事
运行时用 JS 设置 element.checked = true 确实能选中，但它不触发 change 事件——这意味着依赖 addEventListener('change', ...) 的校验、UI 更新或请求逻辑不会执行。
- 推荐做法是调用
element.click()：它既更新选中态，又触发完整事件链（包括click和change） - 若必须用
.checked = true，请手动补发事件：element.dispatchEvent(new Event('change', { bubbles: true })) - 注意 DOM 是否已挂载：在
DOMContentLoaded前操作可能失败，可包裹在requestAnimationFrame或使用document.querySelector确保元素存在
checked 和 .checked 不同步，别混用
HTML 中的 checked 是初始快照，JS 中的 .checked 是运行时状态。修改 element.setAttribute('checked', '') 不影响当前选中态，也不会让 .checked 变为 true；反过来，设 .checked = false 也不会从 HTML 中移除 checked 属性。
- 读初始值？用
element.hasAttribute('checked')，不是element.checked（后者在 DOM 加载后才反映真实状态） - 清空整组选中？HTML 标准不允许无选中态，得加一个「无偏好」选项并设为
checked，或者换用或 checkbox 模拟 - 框架里尤其注意：React 中写
defaultChecked后又用value控制，会导致受控/非受控警告；Vue 中v-model初始绑定值必须匹配某个value，否则所有 radio 显示未选中
初始状态这事看着简单，但跨技术栈（SSR、框架、原生 JS）时最容易在边界处出问题——checked 是唯一入口，其他都是干扰项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
