必须用checked属性而非js赋值，因html初始选中由解析时的属性决定，js赋值不回写html且ssr易失态；checked是布尔属性，存在即生效，同组多checked仅首个生效，name须大小写完全一致。
直接在目标 <input type="radio"> 标签里加 checked 属性，这是唯一可靠、浏览器原生支持的方式。其他任何绕开它的做法（比如 JS 渲染后赋值、CSS 伪类模拟、value 操作）都不能真正影响表单提交行为。
为什么必须用 checked 属性而不是 JS 赋值
HTML 的初始选中状态由解析时的属性决定，不是由 JS 属性控制的。radio.checked = true 只能在 DOM 渲染完成后生效，且不会回写到 HTML 属性上；如果页面刷新或服务端渲染（SSR）未同步，状态就会丢失。
-
checked是布尔属性：写上即生效，不区分checked、checked=""或checked="false"—— 后者照样被选中 - 服务端模板（如 EJS、Django、Vue SFC）里应通过条件判断插入：
<input type="radio" name="mode" value="dev" if .isdev end> - React 中别只写
defaultChecked就不管了：受控组件必须配value和onChange，否则 hydration 会失败或点击跳回
同一组多个 checked 会发生什么
HTML 允许多个 checked 并存，但浏览器只认同名 name 组中第一个出现的 —— 后面的会被静默忽略。这容易导致“以为设对了，实际没生效”的调试困境。
- 常见诱因：模板循环未加排他判断、前后端默认值不一致、手动拼接 HTML 时漏删旧
checked - 验证方法：用浏览器开发者工具查看 Elements 面板，确认只有目标元素有
checked属性（不是仅靠 JS 属性checked: true） - 安全做法：服务端/框架层确保只对一个选项输出
checked，不要依赖“覆盖逻辑”
如何用 CSS 区分默认选中和当前选中
:default 伪类匹配的是初始加载时由 checked 属性定义的默认项，而 :checked 匹配的是当前任意时刻的选中状态。两者语义不同，不能混用。
- 想高亮“页面一打开就该选的那个”：用
input[type="radio"]:default - 想响应用户操作实时样式：用
input[type="radio"]:checked - 老旧浏览器（如 IE）不支持
:default，需用 JS 在加载时加class="is-default"模拟
最容易被忽略的一点是：name 属性大小写敏感且必须完全一致 —— name="theme" 和 name="Theme" 是两组互不干扰的单选按钮，checked 加在哪组都没用。检查 name 值是否拼写统一，比调试 JS 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
