直接在 标签中添加 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 属性，也不影响后续刷新后的初始状态。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 读取初始默认值：用 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" echo :>>

• 务必对齐服务端数据与 HTML value 字符串，注意空格、大小写、引号包裹
• 避免在模板中拼接复杂逻辑；推荐提前计算好布尔变量（如 $is_light_checked），再简单输出 checked
• 若用前端框架接管表单，服务端只需提供初始数据，由框架控制 defaultChecked 或 v-model 绑定

实际开发中最容易被忽略的是：同一组 radio 的 name 值是否真正一致（包括空格和不可见字符），以及是否在 DOM 就绪前就被 JS 重置了状态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！