checked是复选框唯一正确的默认选中属性，selected仅用于option标签，写selected对checkbox无效；正确写法为直接写checked，不带等号和值。
checked 是唯一正确方式，不是 selected，也不是 default 或 value。
为什么写 selected 没反应？
很多人把 <select multiple></select> 里 <option></option> 的 selected 属性，错用到 <input type="checkbox"> 上。复选框根本不认 selected —— 浏览器直接忽略它，控制台也不会报错，只是“看起来没生效”。
真正起作用的只有 checked，它是 input[type=checkbox] 和 input[type=radio] 的原生布尔属性。
- ✅ 正确写法：
<input type="checkbox" name="agree" checked> - ⚠️ 可兼容但不推荐：
<input type="checkbox" name="agree" checked>（XHTML 遗留写法） - ❌ 无效写法：
<input type="checkbox" name="agree" selected>、<input type="checkbox" name="agree" value="true" checked>
多个复选框中只让第一个默认选中
直接在对应 <input> 标签上加 checked 即可，不需要额外逻辑。
比如下面这段 HTML，用户打开页面时，“阅读”会自动勾上，其余不会：
<input type="checkbox" name="hobby" value="reading" checked> 阅读<br><input type="checkbox" name="hobby" value="sports"> 运动<br><input type="checkbox" name="hobby" value="music"> 音乐
注意：复选框之间互不影响，可以任意组合加 checked，不像单选按钮那样要靠 name 分组约束。
服务端模板里容易漏掉的真假判断
后端拼 HTML 时，如果直接把数据库字段（比如字符串 "0" 或 "false"）插进 checked 属性，就会出错——因为 HTML 中只要属性存在，就视为真值。
例如 PHP 模板里这样写是错的：<input type="checkbox" name="notify" checked>，哪怕 $user->subscribed === "0"，浏览器也会渲染为勾选状态。
正确做法是显式判断布尔结果：
- PHP：
{{ $user->subscribed ? 'checked' : '' }} - EJS：
<input type="checkbox" name="notify" user.notify :>> - Node.js/模板引擎同理，必须输出空字符串或完全不写该属性
React/Vue 里硬写 checked 会失效
框架接管表单后，原生 checked 属性只影响初始渲染，后续点击或状态更新完全由框架控制。如果同时写了 checked 和 v-model（Vue）或 checked={...}（React），前者会被忽略。
常见错误场景：
- Vue：
<input type="checkbox" checked v-model="flag">→checked被无视，只看flag初始值 - React：
<input type="checkbox" checked>→ 必须配onChange，否则控制台警告“A component is changing a controlled input to be uncontrolled” - 想初始化选中又允许用户改：React 用
defaultChecked={true}+checked={this.state.agree}+onChange
最易被忽略的点：服务端返回的数据类型（null、"1"、0）和前端期望的布尔值不一致，会导致默认选中逻辑错乱。前后端得对齐“未勾选”的语义，不能只看字段是否存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
