checked属性必须直接写在html标签中（如checked）才控制初始选中，js赋值element.checked=true仅影响运行时状态；错误写法包括checked="true"、checked=""或selected，后者专用于。
checked属性必须直接写在HTML标签里才生效
只靠 JavaScript 赋值 element.checked = true 不会影响页面首次加载时的初始状态。浏览器读取 HTML 时，只看标签上有没有 checked 这个属性——存在即选中，不存在就不选中。
常见错误写法包括：checked="true"、checked="checked"、checked=""。虽然部分浏览器能兼容，但语义错误，W3C 规范只要求属性存在；服务端模板（如 Django、EJS）若直接拼接变量，还可能把字符串 "0" 或 "false" 渲染成 checked="0"，结果仍是选中。
- ✅ 正确写法：
<input type="checkbox" name="agree" value="yes" checked> - ❌ 错误写法：
<input type="checkbox" name="agree" value="yes" checked> - ❌ 无效写法：
<input type="checkbox" name="agree" value="yes" selected>（selected是<option></option>的属性）
多个复选框如何分别控制默认选中
同名 name 的复选框彼此独立，每个都可以单独加 checked，不会互相影响。提交时，所有勾选项会以相同 name 发送多个值（例如 hobby=reading&hobby=swimming）。
典型场景：用户偏好设置里，“邮件通知”和“站内信”默认开启，但“短信提醒”默认关闭。
<input type="checkbox" name="notify" value="email" checked> 邮件<input type="checkbox" name="notify" value="inapp" checked> 站内信<input type="checkbox" name="notify" value="sms"> 短信
注意：不要指望靠 JS 在 DOM 加载后统一赋值来模拟“默认”，那只是运行时状态，刷新后就丢了——初始状态只能由 HTML 决定。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
框架（React/Vue）里为什么 checked 不起作用
框架接管表单后，原生 checked 属性只参与初始渲染，后续状态完全由响应式数据驱动。硬写 checked 属性会被忽略，甚至引发状态脱节。
Vue 中：<input type="checkbox" checked v-model="flag"> → checked 被无视，只看 flag 初始值是否为 true；React 中：defaultChecked 只设初值，若不配 checked 和 onChange，就会变成非受控组件，用户点一次后 JS 状态就不同步了。
- Vue 推荐：
<input type="checkbox" v-model="user.agree">，并在 data 中初始化agree: true - React 推荐：
<input type="checkbox" checked onchange="{handleChange}">，配合useState管理状态 - 服务端渲染时，确保模板输出的初始值与业务逻辑一致（比如用户已订阅，才渲染
checked）
动态插入的复选框怎么设默认选中
用 innerHTML 或 document.createElement() 插入复选框时，不能先设 .checked = true 再挂载——DOM 尚未存在，该操作无效。必须先插入到文档中，再操作 .checked 属性。
更稳妥的做法是：直接拼 HTML 字符串时就带上 checked，比如 el.innerHTML = '<input type="checkbox" name="item" value="1" checked>'；如果必须用 JS 创建，顺序是：
const cb = document.createElement('input')cb.type = 'checkbox'; cb.name = 'item'; cb.value = '1'-
parent.appendChild(cb)（先挂载） -
cb.checked = true（再赋值）
容易被忽略的是：初始状态（HTML 的 checked）和运行时状态（JS 的 .checked 或框架状态）是两套逻辑。混用却不分清边界，调试时几乎必然卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
