radio默认选中仅取决于checked属性是否存在，而非其值；同一组必须name相同才能实现单选排他性；动态设置时应直接操作checked属性并清除同组其他项；框架中需确保初始值与绑定变量一致。
radio 默认选中靠 checked，但只认“存在”不认值
HTML 中 <input type="radio"> 的默认选中逻辑很简单：只要标签上写了 checked 属性（哪怕写成 checked="" 或 checked="false"），浏览器就当它被选中。它不解析属性值，只看有没有这个属性名。
常见错误是写成 checked="false" 或 checked="0"，以为能取消默认，结果反而触发了选中。真正要“不选中”，就得彻底删掉 checked 属性。
-
<input type="radio" name="theme" value="dark" checked>→ 选中 -
<input type="radio" name="theme" value="light" checked="false">→ 还是选中（别信属性值） -
<input type="radio" name="theme" value="auto">→ 不选中（没写checked）
同一组 radio 必须共用 name，否则 checked 互不影响
单选按钮的“单选”行为依赖 name 属性。只有 name 相同的一组 <input type="radio"> 才构成逻辑组，checked 在这组内才具有排他性。
如果漏写 name，或拼写不一致（比如大小写、空格、下划线差异），哪怕视觉上挨着放，它们也互不干扰——可能多个都被 checked，提交时也会全部发出去。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<input type="radio" name="size" value="s" checked>和<input type="radio" name="size" value="m"> - ❌ 错误：
<input type="radio" name="size" value="s" checked>和<input type="radio" name="Size" value="m">（name 大小写不同） - ⚠️ 注意：
name值建议全小写、无空格、用短横线分隔，避免前后端解析歧义
动态设置默认选中？别用 JS 模拟 checked，直接操作属性
服务端渲染或初始状态确定时，优先在 HTML 里写死 checked。如果必须运行时决定（比如从 localStorage 恢复上次选择），不要用 element.checked = true 后再触发 click，而应直接设置属性并确保组内其他 radio 清除 checked。
因为 element.checked = true 只改 DOM 属性，不自动影响同组其他元素；而原生 checked 属性才是真实来源。更稳妥的做法是：
- 用
document.querySelector('input[name="mode"][value="advanced"]')找到目标元素 - 调用
.setAttribute('checked', '')（或.checked = true，两者等效） - 再遍历同 name 的所有 radio，对非目标项调用
.removeAttribute('checked')
否则可能出现两个都带 checked 属性，但实际只显示一个被选中——表单提交时后端收到的仍是两个值。
Vue/React 等框架里，checked 绑定容易忽略受控模式
在 React 中，<input type="radio" checked={value === 'blue'} onChange={...} /> 是受控组件，必须配 onChange 且 state 同步更新，否则点击无效；Vue 类似，v-model 会接管 checked，但初始值必须与绑定 data 字段一致。
典型坑是：data 初始化为 null 或空字符串，而 radio 的 value 都是非空字符串，导致所有 radio 都没被选中，且无法点击生效。
- React 示例：确保
useState('default')初始值匹配某个value - Vue 示例：确认
v-model="selectedColor"对应的data.selectedColor已设为'red'等合法值 - 调试技巧：打印
event.target.value和当前绑定变量，看是否一致
checked 写得再准也没用。 
