复选框默认选中仅由html中是否存在checked属性决定，必须写为checked（无等号、无值），是w3c定义的布尔属性；js赋值或框架绑定不影响初始状态，且checked与v-model等混用易导致状态脱钩。
复选框默认选中必须靠 checked 属性，不是 JS 赋值
页面首次加载时的“默认选中”，只由 HTML 中是否存在 checked 属性决定。哪怕你用 JS 写了 el.checked = true，只要它没写在 HTML 标签里，刷新后就归零——form.reset() 也只认这个原始 HTML 值。
常见翻车点：
- 服务端模板（如 Django、Nunjucks）里写了
checked="{{ user.subscribed }}"，结果渲染出checked="0"或checked=""，浏览器照样当它存在、默认勾上 - Vue/React 中混用
checked和v-model/checked={state}，HTML 的checked被框架忽略，初始状态全靠数据绑定驱动 - 动态创建元素后立刻
el.checked = true，但元素还没挂载进 DOM，赋值无效
checked 属性怎么写才真正生效
必须写成 checked，不带等号、不带引号、不带任何值。这是 W3C 定义的布尔属性，存在即为真。
正确写法：<input type="checkbox" name="notify" value="email" checked>
错误或不推荐写法：
-
checked="true"：语义错误，虽多数浏览器兼容，但某些严格解析环境（如 HTML 验证器、部分 SSR 渲染）可能报错 -
checked="checked"：同上，冗余且不规范 -
selected：那是<option></option>的属性，对input[type="checkbox"]完全无效，静默失败
多个复选框同时默认选中没问题，但别漏掉 value
复选框之间互不影响，默认选中可以叠加。要让“邮件”和“站内信”都默认勾上，就分别给两个标签加 checked：
<input type="checkbox" name="notify" value="email" checked><input type="checkbox" name="notify" value="inapp" checked>
关键提醒：
- 没写
value的复选框，勾选后默认提交字符串"on"，后端容易误判为布尔true，而不是业务需要的标识符 - 提交时，只有
checked === true的复选框才会把value发出去；未勾选的字段压根不出现，不是null也不是空字符串 - 用
FormData收集时，同名复选框会自动合并为数组，但前提是它们都处于勾选状态；没勾的不会进数组
自定义样式时，checked 仍是唯一触发依据
如果你用 CSS 隐藏原生复选框（比如 opacity: 0 + position: absolute），再用 ::before/::after 画个新勾选框，视觉切换仍然必须依赖 :checked 伪类——删掉 checked 属性，自定义样式就失去响应源头。
别指望 accent-color 控制未选中态：它只影响部分现代浏览器中的勾选色，且对未选中背景、边框、尺寸等完全无效。Safari 目前（2026 年 9 月）仍不支持该属性用于 checkbox。
最易被忽略的一点：默认状态（HTML checked）和运行时状态（JS .checked 或框架响应式数据）是两套独立逻辑。混用却不区分边界，比如在 Vue 里既写 checked 又绑 v-model，八成导致初始渲染与后续交互脱钩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
