直接在 <input type="radio"> 标签中添加 checked 属性是唯一可靠、语义正确且兼容所有浏览器的默认选中方式；它仅决定初始状态，与 JavaScript 的 checked 属性（反映当前状态）不同，同名单选框中多个 checked 仅第一个生效，需确保 name 一致且无 JS 覆盖或动态插入导致失效。
如何让 <input type="radio"> 默认选中
直接在标签里加 checked 属性即可，这是唯一可靠、语义正确且兼容所有浏览器的方式。
常见错误是试图用 JavaScript 在页面加载后赋值 checked = true，或误以为设置 value 就能触发选中——这两者都不影响初始渲染状态。
-
checked是布尔属性，写上即生效，无需赋值（checked=""或checked="checked"效果相同） - 同一组单选框必须有相同的
name值，否则无法互斥；只有同name下的checked才会被识别为“默认选中项” - 如果多个同名 radio 都写了
checked，浏览器只认第一个（但这是无效 HTML，应避免）
checked 属性与 JavaScript 动态控制的区别
HTML 的 checked 属性只决定初始状态；之后 JS 修改的是元素的 checked 属性（property），不是 attribute。
例如：document.querySelector('input[value="yes"]').checked = true 会立即选中，但它不改变 HTML 源码里的 checked 属性，也不影响后续刷新后的初始状态。
立即学习“前端免费学习笔记（深入）”；
- 读取初始默认值：用
element.hasAttribute('checked')，不是element.checked（后者反映当前状态） - 服务端渲染或静态 HTML 场景下，仅靠 JS 设置无法替代
checked属性 - Vue/React 等框架中，
checked属性仍需显式绑定（如 React 中用defaultChecked控制初始值）
常见失效场景和排查点
明明写了 checked 却没生效？大概率是以下原因。
- 拼写错误：写成
check、checkedd或大小写混用（HTML 属性名不区分大小写，但编辑器可能报错） - 同名 radio 被 JS 覆盖：某些表单库或初始化脚本会遍历 radio 并重置状态，导致
checked被清空 - 动态插入 DOM：通过
innerHTML或insertAdjacentHTML插入含checked的 radio，部分浏览器（尤其是旧版 Safari）可能忽略该属性 - 使用了
type="checkbox"却当成 radio 用：checkbox 支持多选，checked行为一致，但逻辑上不满足单选需求
服务端模板中如何安全输出 checked
在 PHP、Jinja、ERB 等模板里，不能硬编码 checked，而要根据数据动态判断。
示例（伪代码）：
<input type="radio" name="theme" value="light" <?php echo $user_theme === 'light' ? 'checked' : ''; ?>>
- 务必对齐服务端数据与 HTML
value字符串，注意空格、大小写、引号包裹 - 避免在模板中拼接复杂逻辑；推荐提前计算好布尔变量（如
$is_light_checked），再简单输出checked - 若用前端框架接管表单，服务端只需提供初始数据，由框架控制
defaultChecked或v-model绑定
name 值是否真正一致（包括空格和不可见字符），以及是否在 DOM 就绪前就被 JS 重置了状态。 
