checked属性唯一合法写法是直接写checked；其他如checked="true"等属语义错误，服务端渲染或验证时可能出错；JS赋值element.checked=true仅影响运行时状态，不改变初始渲染。
checked属性怎么写才真正生效
只写 checked，不带等号、不带引号、不带值——这是唯一符合 HTML 规范的写法。浏览器只认这个布尔属性是否存在，checked="true"、checked="checked"、checked="" 虽然多数情况能“凑合用”，但语义错误，且在服务端模板渲染或 HTML 验证时可能被过滤或报错。
常见翻车点：
- 把
selected误用到<input type="checkbox">上——它只对<option>生效，写上也白写 - 后端模板直接插变量：
checked="{{ $user->subscribed }}"，哪怕数据库存的是字符串"0"，也会被当成真值渲染出checked属性 - 给同一组
radio多个元素都加checked，浏览器只认 DOM 中第一个，后续的被忽略
JS 动态设置 checked 为什么没反应
element.checked = true 是运行时操作，它不改变初始渲染状态，只影响后续交互。如果页面一加载就期望看到勾选，必须靠 HTML 里的 checked 属性；JS 赋值只是“之后把它变成什么样”。
典型失效场景：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 元素还没挂载到 DOM 就执行
el.checked = true（比如document.createElement('input')后立刻赋值） - Vue/React 中同时写了
checked和v-model或checked={state}，框架会忽略原生属性，只认绑定数据 - 用
setAttribute('checked', 'checked')而不是直接赋值element.checked = true——前者只改 HTML attribute，不同步 DOM property，也不触发单选组互斥逻辑
服务端模板里如何安全输出 checked
必须做显式布尔判断，不能直接拼接变量。否则字符串 "false"、"0"、空数组等在模板引擎里常被当作真值处理。
正确做法示例：
- PHP：
<input type="checkbox" name="notify" = $user->subscribed ? 'checked' : '' ?>> - EJS：
<input type="checkbox" name="notify" <%= user.notify ? 'checked' : '' %>> - Django：
<input type="checkbox" name="agree" {% if user.agreed %}checked{% endif %}>，前提是user.agreed真是布尔类型
注意：如果模板变量是字符串，得先转布尔，比如 PHP 的 (bool) $user->subscribed，否则 "0" 仍会触发 checked 渲染。
复选框和单选框的 checked 行为差异
两者都用 checked，但约束逻辑完全不同：
- 复选框：
name相同的多个<input type="checkbox">是独立控件，可以任意组合加checked，互不影响 - 单选框：
name相同才算一组，且必须保证仅一个含checked；name值大小写、空格、下划线都敏感，name="size"和name="Size"是两组 - 提交行为：未勾选的复选框字段压根不发给后端；单选框则总有一个 value 被提交（前提是至少一个有
checked）
最容易被忽略的是：HTML 的 checked 只管“第一次打开页面时长什么样”，而 JS 的 .checked 或框架的响应式状态只管“之后它变成什么样”。混用却不分清这两层，问题就藏在刷新那一瞬间。
