默认选中必须用html的checked属性实现，常见失效原因有三：同一name组多个checked、name值不一致（拼写/大小写/空格）、服务端模板布尔判断错误；checked属性只需存在，无需赋值。
默认选中必须写在 HTML 里，靠 checked 属性，不是靠 JS 赋值，也不是靠框架绑定。
为什么加了 checked 却没默认选中？
常见原因就三个：
- 同一
name组里多个input都写了checked，浏览器只认第一个（或最后一个，行为不统一），但逻辑上应只留一个 -
name值不一致——比如拼错、大小写不同、前后空格没 trim，导致浏览器认为是不同组，互不干扰 - 服务端模板渲染时布尔判断出错，例如把字符串
"0"当作 false，结果漏掉插入checked
检查方式很简单：document.querySelectorAll('input[name="xxx"]') 看是否真是一组，再逐个查 outerHTML 是否含 checked 字样。
checked 属性怎么写才合法？
W3C 规范只要求属性存在，不接受任何值。以下写法都有效：
-
<input type="radio" name="mode" value="dark" checked>✅ 最推荐 -
<input type="radio" name="mode" value="dark" checked>✅ 空字符串也行 -
<input type="radio" name="mode" value="dark" checked>✅ 兼容旧习惯，但冗余
以下写法危险：
-
checked="false"—— 浏览器照样当已选中 -
selected—— 这是<option></option>的属性，对radio完全无效
JS 设置 radio.checked = true 为什么有时没反应？
因为 .checked 是运行时状态，不影响“默认”含义。它只在 DOM 已挂载后生效，且有前提：
- 目标元素必须已存在于 DOM 中（不能刚
createElement就赋值） - 同组其他 radio 必须可访问，否则设
true可能被浏览器忽略（单选组必须有且仅有一个选中项） - 如果想触发联动逻辑（比如显示隐藏区块），
.checked = true不会自动 dispatchchange事件，得手动补：el.dispatchEvent(new Event('change', { bubbles: true }))
更稳妥的 JS 写法是直接操作同名组：
document.querySelectorAll('input[name="theme"]').forEach(r => {
r.checked = r.value === 'dark';
});
框架里（Vue/React）别硬写 checked 属性
框架接管表单后，原生 checked 属性会被忽略。应该用响应式数据驱动：
- Vue：用
v-model或:checked="value === 'xxx'"+@change - React：用
checked={state === 'xxx'}+onChange更新 state
强行在 JSX 或模板里写 checked，要么被警告，要么不生效——因为框架在 mount 时会覆盖初始属性。
最容易被忽略的一点：HTML 的 checked 控制的是「页面第一次打开时的样子」，而 JS 或框架控制的是「之后它变成什么样」。这两者不是同一套逻辑，混着用却不分清边界，问题一定出在加载时机或状态同步上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
