HTML单选框设默认选中应直接使用checked属性，它是唯一可靠、语义正确且兼容性最佳的方式；其他如JS模拟、CSS伪类或value操作均无法真正选中，导致表单提交失败。
HTML 单选框怎么设置默认选中
直接加 checked 属性就行，这是唯一可靠、语义正确、浏览器兼容性最好的方式。
别用 JavaScript 模拟“选中”、别靠 CSS 伪类欺骗视觉、更别试图在 value 上做手脚——这些都不算真正选中，表单提交时不会被包含，formdata.get() 也取不到。
常见错误现象： 页面刷新后状态丢失；用 JS 设置了 element.checked = true 但没触发 change 事件导致逻辑未执行；多个同名 name 的 input[type="radio"] 中漏写 checked，结果一个都没选中。
- 必须确保同一组单选框的
name属性值完全相同（大小写敏感） -
checked是布尔属性，写上即为true，无需checked="true"或checked="checked" - 服务端渲染或模板引擎里，推荐用条件判断动态插入
checked，比如<input type="radio" name="theme" value="dark" if .isdark end>
JavaScript 动态选中单选框要注意什么
手动设置 checked 属性只是第一步，关键是要让浏览器识别这个变化，并触发后续逻辑。
单纯赋值 radio.checked = true 不会自动触发 change 事件，监听 change 的代码不会运行。如果你依赖事件驱动业务逻辑（比如更新 UI、校验、发请求），这就会出问题。
立即学习“前端免费学习笔记（深入）”；
- 设置后手动
dispatchEvent(new Event('change', { bubbles: true })) - 优先用
click()方法代替直接设checked：它既选中控件，又触发原生事件链 - 避免在循环中反复调用
click()或dispatchEvent，可能引发重复提交或状态错乱 - 注意 DOM 是否已挂载：如果元素还没插入文档，
click()无效，得等DOMContentLoaded或使用requestAnimationFrame延迟执行
React/Vue 等框架里单选框不响应点击
本质是受控组件没管好 value 和 onChange 的同步关系，不是 HTML 本身的问题。
典型表现：点击没反应、点完立刻跳回原选项、控制台报 A component is changing an uncontrolled input to be controlled。
- React 中必须同时提供
value（受控值）和onChange（同步更新 state），不能只写defaultChecked就不管了 - Vue 中用
v-model绑定的变量初始值要与某个value匹配，否则所有选项都显示“未选中” - 不要混用
defaultChecked和checked：前者只在首次渲染生效，后者会强制覆盖当前状态，容易造成竞态 - SSR 场景下，服务端渲染的初始值必须和客户端一致，否则 hydration 会失败并降级为客户端接管，导致闪烁或交互异常
移动端单选框点击区域太小怎么办
原生 input[type="radio"] 默认点击热区只有几个像素，用户实际点中率低，尤其在手指操作场景下。
解决思路不是改 input 本身，而是把可点击区域扩大到包裹它的标签上——利用 label 的隐式关联能力。
- 给每个
input加唯一id，对应label的for属性：<input id="opt1" type="radio" name="size" value="m"><label for="opt1">中号</label> - 更推荐显式包裹：
<label><input type="radio" name="size" value="m">中号</label>，语义更强，也不用维护id - 避免用
div+onclick模拟 label 行为：无法聚焦、不支持空格/回车选中、无障碍阅读器无法识别 - 如需自定义样式，用
appearance: none隐藏原生控件，再用::before/::after重绘，保留原始结构和语义
最易被忽略的是：多个同名单选框中，checked 属性只能出现在一个元素上；如果服务端或 JS 多处误加，浏览器会以最后一个为准——这种竞态很难调试，建议用 DevTools 的 Elements 面板实时观察 DOM 状态，而不是只信 console.log。
