checked属性必须直接写在HTML标签中才能决定页面首次加载时的默认选中状态，JS赋值仅改变property不改变初始attribute，且布尔属性规范写法是仅出现checked单词，不带等号、值或引号。
checked属性必须写在HTML里，JS赋值不改变初始状态
页面首次加载时的默认选中状态，只由 HTML 中是否含有 checked 属性决定。浏览器解析到 checked 就渲染为勾选，没写就默认不勾选。哪怕你写 document.querySelector('input').checked = true 放在 DOMContentLoaded 里，用户也会看到“先没勾、再突然勾上”，表单提交前若快速操作，还可能漏掉这个初始值。
常见翻车点：
- 服务端模板直接拼接变量，比如
checked="{{ $user->subscribed }}"，结果数据库存的是字符串"0"，模板引擎当真值处理，渲染出checked="0"→ 实际仍被选中 - 用
setAttribute('checked', 'true')替代直接赋值el.checked = true→ 只改 attribute，不同步 property，也不触发单选组互斥逻辑 - Vue/React 中同时写了
checked属性和v-model或checked={state}→ 框架会忽略原生checked，只认绑定数据
正确写法只有 checked，别带等号、别带值
checked 是布尔属性，规范写法就是标签里直接出现这个词，不带 =、不带引号、不带任何值。比如：<input type="checkbox" name="notify" value="email" checked>。其他写法如 checked="true"、checked="checked"、checked="" 虽然多数浏览器能“凑合用”，但语义错误，W3C 不认可，服务端 HTML 验证或某些模板引擎（如严格模式下的 Thymeleaf）可能直接过滤掉。
特别注意：
立即学习“前端免费学习笔记（深入）”；
- 别误用
selected—— 它只对<option>生效，写在<input type="checkbox">或<input type="radio">上完全无效 - 单选框同名
name下多个checked，浏览器只认 DOM 中第一个，后续的被忽略（HTML 合法，但逻辑易错） - 复选框可以多个同时加
checked，彼此独立，互不影响
服务端模板中安全输出 checked 的写法
不能靠模板引擎自动“转布尔”，必须显式判断。否则字符串 "false"、"0"、空数组等，在 EJS、Django、PHP 等模板里常被当成真值，导致不该选中的也被渲染出 checked。
推荐写法示例：
- PHP：
<input type="checkbox" name="notify" = $user->subscribed ? 'checked' : '' ?>>，且确保$user->subscribed是布尔类型，或显式转：(bool) $user->subscribed - EJS：
<input type="checkbox" name="notify" - Django：
<input type="checkbox" name="agree" {% if user.agreed %}checked{% endif %}>，前提是user.agreed是 Python 布尔值，不是字符串
动态创建元素时 .checked 要等挂载后再设
用 document.createElement('input') 创建 checkbox 或 radio 后，如果还没插入 DOM 就执行 el.checked = true，该赋值会被丢弃——未挂载节点没有渲染上下文，.checked 属性虽可读写，但不触发 UI 更新或表单逻辑。
正确顺序必须是：
- 创建元素：
const el = document.createElement('input') - 设置类型：
el.type = 'checkbox' - 先挂载：
document.body.appendChild(el) - 再赋值：
el.checked = true
框架中更推荐用 defaultChecked（React）或 :checked 绑定初始值（Vue），避免手动操作 DOM 时机出错。最容易被忽略的一点：HTML 的 checked 控制“第一次打开页面时长什么样”，而 JS 的 .checked 或框架响应式数据控制“之后它变成什么样”——混用却不分清这两层，问题几乎必然发生。
