直接加checked属性即可默认选中，但需确保同组name完全一致（大小写敏感）；checked是布尔属性，存在即生效，推荐写成checked（无值），多个同name时仅首个checked生效。
如何让 <input type="radio"> 默认选中
直接加 checked 属性就行，但必须确保同一组单选框的 name 相同，否则浏览器不认为它们是互斥的一组。
常见错误是只写 checked="true" 或 checked="checked" —— 实际上 checked 是布尔属性，只要存在就生效，值写什么都一样，推荐写成 checked（无值）更简洁规范。
<input type="radio" name="gender" value="male" checked> 男<input type="radio" name="gender" value="female"> 女- 如果多个同
name的radio都写了checked，浏览器只认第一个（HTML 规范行为，不是 bug）
为什么加了 checked 却没生效？
最常踩的坑是：表单被 JavaScript 动态重置、或后端模板渲染时覆盖了属性。比如 Vue/React 中用 v-model 或 value + onChange 控制状态，此时 checked 属性会被框架忽略，得靠组件状态控制选中态。
纯静态 HTML 下失效，大概率是：
立即学习“前端免费学习笔记（深入）”；
-
name拼错或大小写不一致（"Gender"≠"gender"） - 标签没闭合导致解析错乱，比如
<input ...><label>...</label>写成<input ...>... - 浏览器缓存了旧版本，刷新时按
Ctrl+F5强制重载
checked 和 JavaScript 设置的区别
HTML 属性 checked 决定初始状态；JS 设置 element.checked = true 改变当前状态，且会触发 change 事件。两者不冲突，但顺序重要：
- 页面加载时，先读取 HTML 的
checked，再执行 JS 脚本 - 如果 JS 在 DOM 加载完立即运行并设
checked = false，就会取消默认选中 - 想用 JS 模拟“默认选中”，得确保它不覆盖 HTML 层的意图，或者干脆删掉 HTML 的
checked，全由 JS 控制
服务端渲染时怎么安全设置默认值
PHP/Python/Jinja 等模板里，别硬编码 checked，要用逻辑判断：
<input type="radio" name="theme" value="dark" <?php echo ($user_theme === 'dark') ? 'checked' : ''; ?>> 深色
Node.js 的 EJS 或类似场景同理，关键点是：
- 避免拼错变量名导致空字符串，结果变成
checked=""（仍生效，但语义不清） - 确保比较逻辑严格，比如用
===而非==，防止字符串"0"和数字0混淆 - 如果默认值来自用户数据，记得做 XSS 过滤，不要直接插入未转义的值到属性中
真正容易被忽略的是：当单选框嵌套在动态生成的列表里，name 和 value 的一致性必须由循环逻辑保证，漏一个 name 就会让整组失效。
