HTML复选框用checked布尔属性设默认选中，JS动态设置需用true/false布尔值；提交时仅发送已勾选项，未勾选字段不提交；label绑定需id+for或包裹input；判断状态用.checked而非getAttribute。
HTML复选框怎么设置默认选中
用 checked 属性就行，它是个布尔属性，存在即生效，不用写 checked="true" 这种——写了反而可能被某些旧浏览器误解。
常见错误是把 checked 当成 JS 变量去赋值，比如 input.checked = "true"（字符串）或漏掉引号直接写 checked=true（HTML 中无效）。
-
<input type="checkbox" name="hobby" value="coding" checked>—— 默认勾选 -
<input type="checkbox" name="hobby" value="reading">—— 默认不勾选 - JS 动态设置：用
element.checked = true或false（注意是布尔值，不是字符串）
多个 checkbox 怎么取值（尤其是后端接收）
浏览器只提交「被勾选」的 checkbox 的 value，没勾的压根不发。所以后端收不到“false”或空值——这是最常踩的坑。
典型场景：用户可选 0–N 项兴趣，你希望后端知道“用户没选 A”，但光靠 checkbox 实现不了，得配合隐藏域或服务端默认逻辑。
- HTML 中多个同名
name是合法的：<input type="checkbox" name="topic" value="js">、<input type="checkbox" name="topic" value="css"> - 提交后，服务端收到的是数组（如 PHP 的
$_POST['topic']是数组，Python Flask 的request.form.getlist('topic')） - 如果全都没勾，这个字段通常根本不会出现在表单数据里（不是
[]，是缺失）
checkbox 和 label 怎么正确绑定
不绑定也能点，但体验差：只能点小方框，不能点文字；屏幕阅读器也读不准。绑定靠 id + for，或者把 input 包进 label。
立即学习“前端免费学习笔记（深入）”；
容易错在 id 重复、拼写不一致，或者用了 name 当 for 值（for 必须对应 id）。
- 推荐写法（显式绑定）：
<input id="agree" type="checkbox" name="agree"><label for="agree">我同意</label> - 更简洁写法（隐式包裹）：
<label><input type="checkbox" name="agree">我同意</label> - 别写
<label for="agree">...</label><input id="agre" ...>（id 拼错）
用 JS 判断 checkbox 是否被勾选
别用 .getAttribute('checked')，它返回的是初始状态（HTML 里有没有写 checked），不是实时状态。要用 .checked 这个 DOM 属性。
另外，别混淆 input[type=checkbox] 和 input[type=radio] 的行为：checkbox 可多选，radio 是单选组，JS 获取方式不同。
- 正确判断：
if (document.getElementById('news').checked) { ... } - 批量获取所有勾选项：
document.querySelectorAll('input[name="fruit"]:checked') - 监听变化：
el.addEventListener('change', () => console.log(el.checked))（用change而不是click，兼容键盘操作）
checkbox 表面简单，但默认不提交、状态易混淆、绑定易出错——这些地方一不留神就让表单逻辑跑偏。尤其要注意服务端永远收不到“未勾选”的显式信号。
