单选按钮组的初始选中状态由HTML中的checked属性决定，而非value、name或JS赋值；同name下仅允许一个checked，否则行为未定义；框架中应使用v-model（Vue）或useState+onChange（React）进行受控管理。
单选按钮组的初始值由 checked 属性决定
浏览器只认 checked 这个布尔属性，而不是 value、name 或 JS 赋值。哪怕你用 JS 改了 value 或设置了 defaultChecked，只要没写 checked，页面加载时就不会被选中。
常见错误是以为给某个 <input type="radio"> 设置 value="on" 就能默认选中 —— 实际上完全无效。
- 必须在 HTML 中显式写
checked（可简写，无需checked="true"） - 同 name 组里只能有一个带
checked，否则行为未定义（多数浏览器只认第一个） - 服务端渲染或模板引擎中，要根据真实业务状态动态插入
checked
Vue/React 等框架里别直接操作 checked
在响应式框架中硬写 checked 属性会导致受控与非受控冲突。比如 Vue 模板里写 :checked="item.value === selected"，但没配 @change 更新 selected，就会卡死无法切换。
正确做法是交给框架的数据绑定机制：
立即学习“前端免费学习笔记（深入）”；
- Vue：用
v-model绑定一个响应式变量，初始值设为对应value - React：用
useState初始化，并在onChange里更新；checked属性由状态驱动 - 纯 JS 动态设置？用
document.querySelector('[value="xxx"]').checked = true，但必须确保 DOM 已就绪
后端传参时 value 值和初始选中不匹配怎么办
典型场景：后端返回 {"status": "draft"}，但单选按钮的 value 是 "DRAFT" 或 "1"，直接比对会失败，导致没选中。
解决关键不是改 HTML，而是对齐数据口径：
- 统一用字符串比较，注意大小写和空格：
value="draft"对应后端字段小写 - 转换层处理：JS 加载时把后端值映射成 UI 所需 value，例如
const map = { draft: 'DRAFT', published: 'PUBLISHED' } - 避免用数字做 value（如
value="0"），容易和 false/0 混淆，优先用语义化字符串
defaultChecked 和 checked 的区别不能混用
defaultChecked 是 React 专用 prop，仅控制首次渲染时的“默认”状态，之后完全失效；checked 是受控模式必需属性，每次 render 都要重新计算。
错误示例：<input type="radio" defaultChecked={value === 'active'} /> —— 切换选项后这个判断不会再生效。
- 要持久响应变化，必须用
checked+onChange -
defaultChecked只适合一次性初始化且后续不再变更的场景（极少见） - SSR 时若服务端和客户端初始值不一致，React 会警告 “Prop `checked` did not match”，说明前后端状态没对齐
checked。这些地方一错，整个单选组就“看起来没反应”。 
