单选框默认选中必须用 checked 属性，它是唯一可靠方式，确保真正参与表单提交、被 formdata 收集且受 form.reset() 管控；其他模拟方式均无效。
单选框默认选中必须用 checked 属性，别绕路
直接在 HTML 里写 checked 是唯一可靠方式。它不是“视觉上看起来像选中”，而是真正参与表单提交、被 FormData 收集、受 form.reset() 管控的状态。任何用 CSS 伪类模拟、JS 改 style 或只设 value 的做法，提交时都拿不到值。
常见错误现象：document.querySelector('input[value="dark"]').checked = true 看似生效，但刷新页面就丢失；或者多个同名 name 的 input[type="radio"] 都漏写 checked，结果整组全未选中。
-
checked是布尔属性，只写checked就行，不要checked="true"或checked="checked" - 同一组单选框的
name值必须完全一致（大小写、空格都不能差） - 服务端渲染时，用模板条件判断插入
checked，比如<input type="radio" name="theme" value="dark" if .isdark end>
JS 动态设置 checked 时，click() 比赋值更安全
单纯执行 radio.checked = true 只改状态，不触发 change 事件——如果你靠监听 change 来更新 UI、校验或发请求，逻辑就断了。
更稳妥的做法是调用 click() 方法：它既选中控件，又走完整事件链（包括 focus、change），且自动处理同组互斥逻辑。
- 确保元素已挂载到 DOM，否则
click()无效；可用requestAnimationFrame或DOMContentLoaded做兜底 - 避免在循环里对多个单选框反复
click()，容易引发重复提交或状态错乱 - 别用
setAttribute('checked', 'checked')，它只改 HTML attribute，不改实际选中状态
React/Vue 中别混用 defaultChecked 和 checked
框架里单选框“点不动”或“点完跳回去”，本质是受控与非受控状态打架。React 要求同时提供 checked（当前值）和 onChange（同步更新），只写 defaultChecked 就等于告诉 React：“你别管它”，后续点击就会脱钩。
Vue 同理：v-model 绑定的变量初始值，必须和某个 value 字符串完全匹配，否则所有选项都显示未选中。
- React 示例：正确写法是
<input type="radio" name="mode" value="prod" checked onchange="{e"> setMode(e.target.value)} /> - SSR 场景下，服务端渲染的
checked状态必须和客户端初始 state 一致，否则 hydration 失败，页面会闪烁或交互异常 - 别在同一个 input 上同时写
defaultChecked和checked，后者会强制覆盖前者，造成竞态
form.reset() 不清空，它回退到 checked 初始状态
很多人以为 form.reset() 是“把所有单选框取消选中”，其实它只是把每个单选框还原成 HTML 加载时的 checked 状态——如果初始没写 checked，重置后就是全空；如果写了，就回到那个选项。
所以，想实现“全部清空”，不能依赖 reset()，得手动遍历并设 el.checked = false；而想“重置回默认选项”，就得确保初始 HTML 里那个 checked 是你真想要的。
- 动态插入的单选框（如 JS 创建后 append 到 DOM）不在初始 HTML 中，
reset()完全不碰它们 - 检查表单是否可重置：控件必须有
name属性，且不能全disabled或display: none - 读取当前选中值用
element.checked（property），而不是getAttribute('checked')（attribute）
checked 写对、框架里受控逻辑写稳、重置行为理解透——这三处任一出错，都会让“默认选中”变成一个随时崩塌的假象。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
