要让 checkbox 默认选中，必须在 HTML 中显式声明 checked 属性；JS 赋值仅影响运行时状态，不改变初始渲染。

如何正确设置 checkbox 的默认选中状态

checkbox 默认不勾选，要让它一加载就选中，必须显式写 checked 属性，仅靠 JS 赋值 input.checked = true 不会影响初始渲染逻辑。

常见错误是只在 JS 里操作而忽略 HTML 层面的声明，导致页面首次加载时状态与预期不符。

• checked 是布尔属性，写上即为 true，无需赋值，<input type="checkbox" checked> 和 <input type="checkbox" checked="checked"> 效果一致
• 如果用 JS 动态控制，默认值仍由 HTML 中是否存在 checked 决定；后续 JS 修改只影响运行时状态，不改变初始快照
• 服务端渲染或模板引擎中，务必根据数据判断是否插入 checked，而不是依赖客户端补全

获取多个 checkbox 的选中值（非 jQuery 场景）

原生 JS 获取一组同名 checkbox 的选中项，不能用 document.querySelector 单取，得用 querySelectorAll 配合过滤。

典型场景：表单提交前收集用户勾选的标签、权限、兴趣等多选项。

立即学习“前端免费学习笔记（深入）”；

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 用 name 属性分组，例如 <input type="checkbox" name="topic" value="js">
• 获取所有选中项的 value：

  const values = Array.from(
    document.querySelectorAll('input[name="topic"]:checked')
  ).map(cb => cb.value);

• 注意 :checked 伪类必须写在选择器末尾，document.querySelectorAll('input:checked[name="topic"]') 无效
• 若用 form.elements，需手动遍历并判断 type === 'checkbox' && checked

为什么点击 label 无法触发 checkbox 切换

label 和 checkbox 关联失效，最常见原因是 for 属性值与 checkbox 的 id 不匹配，或直接省略了 id。

不是所有写法都能激活原生交互：嵌套写法虽简洁，但可访问性（如屏幕阅读器）支持不如显式 for + id。

• 推荐写法：<input id="agree" type="checkbox"><label for="agree">我同意</label>
• 嵌套写法有效但有限制：<label><input type="checkbox">我同意</label> —— 此时内部 input 必须是 label 的**直接子元素**，中间不能有其他标签或文本节点
• 若用 JS 动态生成 checkbox，记得同步生成匹配的 id，否则 for 失效

提交表单时 checkbox 值未发送或始终为 "on"

HTML 表单提交时，未勾选的 checkbox **完全不会出现在 FormData 或 query string 中**；已勾选的，若没设 value，则默认提交字符串 "on" —— 这不是 bug，是规范行为。

后端常因此收不到字段，或误判为字符串 "on" 而非布尔值。

• 务必为每个 checkbox 设置明确的 value，例如 <input type="checkbox" name="notify" value="email">
• 后端不要依赖字段存在与否判断“是否勾选”，而应检查该字段是否在提交数据中出现（且值合法）
• 用 FormData 获取时，未勾选的项根本不会被 append，所以 formData.has('xxx') 可直接作为判断依据
• 若需强制提交“false”值，需额外加一个隐藏域配合 JS 控制，但通常不推荐，会破坏语义和表单默认行为

实际项目中最容易被忽略的是：服务端解析时假设 checkbox 字段一定存在，或把 "on" 当作业务值硬编码处理。真正健壮的做法，是把 checkbox 视为“有则真、无则假”的二元信号，而非普通字符串字段。