直接在html中为添加checked布尔属性即可默认选中，同组（name相同）只能有一个checked，name值严格区分大小写和空格，js动态设置应操作elem.checked = true而非setattribute。
给 <input type="radio"> 添加 checked 属性即可生效
浏览器只认 checked 这个布尔属性本身是否存在，不关心值是 true、"checked" 还是空字符串。只要标签里写了 checked，对应单选框就会默认被选中。
注意：同一组（name 相同）的单选框中，**只能有一个**带 checked；否则 HTML 合法但逻辑混乱——浏览器会以 DOM 中第一个 checked 的为准，后续的会被忽略。
-
checked必须写在 HTML 源码中，JS 动态设置elem.checked = true是运行时行为，不属于“HTML 代码设置”范畴 - 不要写
checked="false"或checked="0"，这些都会被当作真值处理，等效于checked - 如果服务端渲染或模板引擎生成 HTML，确保只对预期的那个选项输出
checked
必须保证同组单选框 name 属性完全一致
单选框的“组”由 name 属性定义，不是靠 class、id 或位置。哪怕视觉上排在一起，name 不同就互不影响，checked 也各自独立生效。
<input type="radio" name="theme" value="light" checked><input type="radio" name="theme" value="dark"><input type="radio" name="color" value="red" checked><!-- 这个和上面不是一组，不会取消前面的选中 -->
- 大小写敏感：
name="Theme"和name="theme"是两组 - 空格也算差异：
name=" size "≠name="size" - 服务端传参时，后端通常只接收同名
name的那个被选中的value，所以name一致性直接影响数据提交结果
用 JS 动态控制默认选中前，先确认是否真需要绕开 HTML 原生机制
如果只是初始化状态，直接写 checked 最简单可靠。只有在以下情况才建议 JS 干预：
- 默认选中项需根据 URL 参数、localStorage 或用户历史决定
- 表单是动态渲染（如 Vue/React 组件），原生
checked无法响应式更新 - 需要兼容老版本 IE（IE8 及以下对
checked属性支持不稳定，但这类场景现在极少见）
若必须用 JS，别用 setAttribute('checked', 'checked')，而应直接操作属性：
document.querySelector('input[value="dark"]').checked = true;
因为 checked 是 DOM 属性（property），不是 HTML 特性（attribute）；两者在某些情况下会不同步。
常见错误：用 checked="checked" 却漏掉 name 或拼错 value
写全了 checked 却发现没效果？大概率是这两处之一出了问题：
-
name缺失或拼写不一致 → 浏览器认为它不属于任何组，无法参与单选逻辑 -
value和后端期待的不一致 → 前端看着选中了，提交时后端收不到对应值（比如前端写value="blue"，后端只处理"navy"）
调试时打开浏览器开发者工具，检查元素，确认目标 <input> 上同时存在正确的 name、value 和 checked 属性，且没有其他同 name 的 input 也带 checked。
最易被忽略的是：多个单选框块被重复引入（比如模板 include 多次），导致页面中出现两套同 name 的单选框，其中一套的 checked 被另一套覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
