直接读 checked 属性最可靠，返回布尔值且不受 disabled 影响；多个同名复选框用 querySelectorAll('input[name="hobby"]:checked') 获取已勾选项；监听 change 而非 click 以覆盖键盘等操作。
如何用 JavaScript 检查复选框是否被勾选
直接读 checked 属性是最可靠的方式。它返回布尔值，不受视觉状态或 disabled 影响，只反映当前 DOM 中的真实选中状态。
- 对单个复选框：
document.getElementById('agree').checked—— 返回true或false - 对多个同名复选框（如
name="hobby"）：需遍历document.querySelectorAll('input[name="hobby"]')，逐个读checked - 别用
value判断是否选中——未勾选时value依然存在，且和勾选无关 - 注意：动态插入的复选框必须在插入 DOM 后再读取
checked，否则会报null
表单提交前验证至少一个复选框被选中
常见场景是“请至少选择一项兴趣爱好”。关键不是收集值，而是确认有勾选项；否则 submit 事件里直接 preventDefault() 并提示即可。
- 推荐写法：
const checkboxes = document.querySelectorAll('input[name="hobby"]:checked'); if (checkboxes.length === 0) { alert('请至少选择一项兴趣爱好'); event.preventDefault(); } - 别用
document.getElementsByName('hobby')然后手动遍历.checked——多写几行且易漏length判断 - 如果复选框带
disabled，:checked伪类自动忽略它们，无需额外过滤 - 注意兼容性：
:checked在 IE9+ 和所有现代浏览器都支持，但 IE8 及更早版本不支持，需降级用循环
获取所有已勾选复选框的 value 值
用户提交后，后端通常只需要被选中的那些值。用 Array.from() 转数组再 map 是最简洁的现代写法。
- 一行搞定：
const selectedValues = Array.from( document.querySelectorAll('input[name="hobby"]:checked') ).map(cb => cb.value); - 如果需要兼容旧环境（如 IE11），改用
forEach手动 push：const values = []; document.querySelectorAll('input[name="hobby"]:checked').forEach(cb => values.push(cb.value)); - 别用
form.elements.hobby—— 当只有一个复选框时返回元素本身，多个时才返回 NodeList，行为不一致，容易出错 - 注意空字符串值：
value=""的复选框勾选后也会被纳入结果，若业务不允许，需额外过滤.filter(v => v.trim())
为什么用 change 而不是 click 监听复选框状态变化
因为用户可通过空格键、辅助工具或脚本触发切换，click 事件无法覆盖这些路径；change 是语义上唯一能准确捕捉“选中状态真正改变”的事件。
- 正确绑定：
checkbox.addEventListener('change', handler) - 错误示范：
checkbox.addEventListener('click', handler)—— 键盘操作不会触发，且在移动端可能响应延迟 - 如果监听的是整个表单，注意
event.target必须判断是否为复选框：form.addEventListener('change', e => { if (e.target.type === 'checkbox' && e.target.name === 'hobby') { // 处理逻辑 } }); - 别在
change里直接调用form.submit()—— 它会绕过表单原生校验（如required），应统一走 submit 事件处理流
实际项目中最容易忽略的是 disabled 复选框对 :checked 查询无影响，以及键盘操作下 click 事件完全失效——这两点一旦漏掉，测试时容易在无障碍场景或快捷键操作中暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
