HTML表单复选框控件默认勾选的属性配置-html教程-PHP中文网

默认勾选必须用checked属性且不带等号和值，因w3c定义其为布尔属性——存在即生效；checked="true"等写法语义错误，服务端渲染易出错，js赋值.checked=true仅影响运行时状态而非初始渲染。

html表单复选框控件默认勾选的属性配置

默认勾选必须用 checked 属性，且只能写在 HTML 标签里，不带等号、不带值——浏览器才认它是“初始状态”。

为什么 `checked="true"` 或 `checked="checked"` 不推荐

W3C 规范定义 checked 是布尔属性，存在即生效。写成 checked="true" 虽多数浏览器能兼容，但语义错误，且在某些严格解析环境（如服务端渲染模板、部分 Linter 工具）会报 warning 或被忽略。
更关键的是：若后端模板逻辑出错（比如 Django 模板中 {% if user.opt_in %}checked{% endif %} 但 user.opt_in 是字符串 "0"），仍会渲染出 checked="0" 这类非法值，导致行为不可控。

`document.querySelector(...).checked = true` 为什么没效果

这个操作只改运行时状态，不影响页面首次加载的“默认”。常见翻车点：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

执行时机太早：DOM 尚未挂载，querySelector 返回 null
框架接管了表单：Vue/React 中硬写 .checked = true 会被响应式系统覆盖，应改用 v-model 或 checked={state} + onChange
没触发联动：赋值不会自动触发 change 事件，需要手动 el.dispatchEvent(new Event('change', { bubbles: true }))

同名复选框的 `checked` 可以多个共存

和 radio 不同，checkbox 组内多个元素加 checked 完全合法，且互不影响：

<input type="checkbox" name="notify" value="email" checked> 邮件
<input type="checkbox" name="notify" value="inapp" checked> 站内信
<input type="checkbox" name="notify" value="sms"> 短信

提交时，只有勾选项的 value 会以多个同名字段发出（如 notify=email&notify=inapp）。没设 value 的，勾选后默认发 "on"，后端容易误判为字符串而非布尔值。

最容易被忽略的是边界：HTML 的 checked 决定“第一次打开长什么样”，JS 的 .checked 或框架数据决定“之后变成什么样”。混用却不分清这两层，问题就藏在刷新那一瞬间。