单选按钮组的checked属性需确保dom属性、js属性和框架绑定值三者一致才能生效；动态设置时须手动清除同组其他选项并设目标项，或在初始化阶段正确设置绑定值。
单选按钮组的 checked 属性不能靠 JS 赋值后自动生效
直接给 <input type="radio"> 元素设置 checked = true 或 element.checked = true 是有效的，但前提是该元素已存在于 DOM 中，且同名 name 下没有其他已标记 checked 的兄弟节点。常见错误是：在动态渲染（如 Vue/React 渲染、AJAX 插入 HTML 后）中，用 JS 找到目标 radio 并设 checked，却没清除同组其他 radio 的 checked 状态——浏览器会强制只保留一个 checked，它选谁取决于 DOM 顺序或内部策略，结果不可控。
实操建议：
- 手动清空同组所有 radio 的
checked，再设目标项：document.querySelectorAll('input[name="gender"]').forEach(r => r.checked = false); document.querySelector('input[value="female"]').checked = true; - 若使用原生 JS 动态插入 HTML 字符串，确保插入前就写好
checked属性：<input type="radio" name="mode" value="prod" checked>，而不是插入后再补 - 避免依赖
setAttribute('checked', '')，它只影响 HTML 属性，不触发 DOM 属性同步；必须用.checked = true/false
Vue 中 v-model 绑定 radio 组时，默认值失效的典型原因
Vue 的 v-model 会接管 radio 的选中逻辑，此时 checked 属性和初始 HTML 中的 checked 都会被忽略。默认值完全由绑定的数据变量决定。
实操建议：
- 确保 data 中定义的绑定变量（如
selectedOption）有明确初始值，且该值与某个 radio 的value完全匹配（包括类型）：data() { return { selectedOption: 'active' } }，对应<input type="radio" value="active"> - 如果初始值来自异步请求（如 API 返回），不要等 mounted 再赋值；应在数据响应式初始化阶段就设好默认值，或用
v-if控制 radio 组渲染时机，避免“先渲染空值、再更新”的错位 - 注意字符串 vs 数字：若后端返回
{ status: 1 }，而 radio 的value是字符串"1"，需显式转换：this.selectedStatus = String(res.status)
React 中受控 radio 组的默认值必须从 state 初始化
React 要求 radio 必须是受控组件（即 value 和 onChange 成对出现），此时 defaultChecked 只在首次挂载时起作用，后续 state 更新不会重新触发它。换句话说：defaultChecked 不是“默认值”，而是“首次渲染时的 checked 状态”。
实操建议：
- 用
useState初始化 state，并确保初始值与某个 radio 的value匹配：const [category, setCategory] = useState('news');对应<input type="radio" value="news">
- 不要混用
defaultChecked 和 <code>checked：一旦用了checked={category === 'news'}，就必须配合onChange更新category，否则会变非受控并报 Warning - 服务端渲染（SSR）时，前后端初始 state 必须一致，否则 React 会因 checksum mismatch 报错或丢弃 DOM；可在
useEffect中延迟 hydrate，或用suppressHydrationWarning慎重处理
原生 HTML + localStorage 场景下恢复上次选择
用户刷新页面后想记住上一次选中的 radio，需要手动读写 localStorage。难点在于：DOM 加载完成前就读取值，可能导致闪动或覆盖。
实操建议：
- 在
中内联一小段脚本，同步读取并打上checked属性（早于 DOM 解析）：<script> const last = localStorage.getItem('theme'); if (last) document.write(`<input type="radio" name="theme" value="${last}" checked>`); </script>（仅适用于静态插入，慎用于复杂场景） - 更通用做法：DOM ready 后立即应用：
document.addEventListener('DOMContentLoaded', () => { const saved = localStorage.getItem('paymentMethod'); if (saved) { const target = document.querySelector(`input[name="payment"][value="${saved}"]`); if (target) target.checked = true; } }); - 每次 change 后立刻存：
el.addEventListener('change', e => localStorage.setItem('paymentMethod', e.target.value))；注意避免监听 document 全局 change，防止干扰其他表单
checked」、「JS property checked」、「框架绑定值」三者始终一致——漏掉任意一环，就会出现“看起来设了，但没生效”的情况。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
