HTML中设radio默认选中只需在标签内写checked属性，如<input type="radio" name="mode" value="prod" checked>；它是布尔属性，不接受值，仅存在即生效，且同name组中只能有一个带该属性。
HTML <input type="radio"> 怎么设默认选中
靠 checked 属性，不是靠 value、name 或 js 赋值时机。只要 html 渲染时该标签带 checked，浏览器就认它为初始选中项。
常见错误是写成：<input type="radio" name="mode" value="prod" checked="true"> —— 其实 checked 是布尔属性，写成 checked="false" 或 checked="" 都算 true；只有不出现这个属性才不选中。
- 正确写法：
<input type="radio" name="mode" value="prod" checked> - 多个同名 radio 中，只应有一个带
checked，否则行为未定义（多数浏览器只认第一个） - 服务端模板（如 Jinja、Thymeleaf）里动态加
checked，要确保只在一个分支里输出该属性，别漏判或重复
为什么 JS 设置 checked = true 有时不生效
因为 DOM 尚未加载完成，或者元素被后续代码覆盖了状态。最典型的是：在 <head> 里执行脚本，或在 Vue/React 等框架中直接操作原生 DOM 而没等渲染完毕。
更隐蔽的问题是：某些 UI 库（如 Bootstrap Switch、iCheck）会把原生 <input> 隐藏掉，用伪元素模拟 radio，此时改原生 checked 属性根本不会触发界面更新。
- 纯 HTML 场景下，优先用 HTML 属性，而不是 JS 初始化
- 必须用 JS 时，确保在
DOMContentLoaded后执行，或用setTimeout(..., 0)推迟到下一轮事件循环（仅应急） - 用了封装库？查文档找对应 API，比如 Bootstrap Switch 要调
$('input').bootstrapSwitch('state', true)，不是改.checked
同名 radio 组里 name 值不一致导致默认值失效
浏览器靠 name 把一组 radio 归为互斥选项。如果两个 radio 的 name 看似一样，但实际有空格、大小写差异或前后缀（比如 name="theme" 和 name=" theme "），它们就不属于同一组 —— 也就谈不上“默认选中其中一个”。
立即学习“前端免费学习笔记（深入）”；
调试时容易忽略这点，尤其当 name 来自变量拼接或后端注入，比如 PHP 里写成 name="= $prefix ?>theme" 却忘了 $prefix 为空字符串或带换行。
- 用浏览器开发者工具检查所有 radio 的
name属性原始值（右键 → “检查”，看 Elements 面板里的确切字符串） - 避免用 JS 动态拼接
name，如非必要，全用静态字符串 - 服务端输出前做 trim 和统一小写处理（如果业务允许），但注意不要破坏语义一致性
Vue/React 中 v-model 或受控组件的默认值陷阱
在框架里，radio 默认选中由数据状态驱动，不是靠 checked 属性。如果你写了 checked 又绑了 v-model，Vue 会警告“避免同时使用 v-model 和 checked”，并且以 v-model 为准 —— 此时 HTML 上的 checked 完全无效。
React 同理：defaultChecked 仅用于初始化，之后完全由 checked prop 控制；若你用的是受控组件（即 checked={this.state.selected === 'a'}），那初始值必须从 state 里来，不能指望 HTML 属性。
- Vue：初始值写在 data() 返回对象里，比如
selected: 'prod'，然后所有 radio 的:value对应上 - React：用
defaultChecked仅适用于非受控组件；受控组件务必初始化 state，比如useState('prod') - 别在 JSX/Template 里混用
checked+v-model/onChange，冲突会静默失败
真正麻烦的不是怎么设默认值，而是「你以为设了，其实没生效」—— 往往卡在 name 不一致、框架接管了控制权、或 UI 库劫持了底层 input 这三类地方。查的时候先看 DOM 里 name 和 checked 实际有没有，再看 JS 是否介入、框架是否接管，最后确认有没有第三方脚本在背后改状态。
