JavaScript 如何操作 checkbox
很多人在做网页的时候，都会遇到一个需求：比如表单里的“同意用户协议”复选框，要判断用户有没有勾选；或者批量选中商品列表里的所有复选框，再统计选中的数量。这些操作大多离不开JavaScript，今天就用几个生活化的例子，把这个常见的网页操作讲明白。
先搞懂：HTML里的checkbox长什么样
要操作checkbox，得先知道它在网页里的样子。我们平时写网页时，复选框就是一个带type="checkbox"属性的<input>标签，比如常见的“运动爱好”选择：
`html
<input type="checkbox" id="basketball"> 打篮球
<input type="checkbox" id="running"> 跑步
`
它有两个关键的属性：id用来精准找到这个复选框，checked用来表示它有没有被勾选——如果<input>里写了checked，页面加载时就会自动打勾，没写就是没选。
最基础的操作：找到复选框并判断状态
想操作复选框，第一步是用JavaScript找到它，就像找教室里的同学，要先喊名字（对应id）。比如要判断用户有没有勾选“同意协议”的复选框，我们可以这么写：
`javascript
// 找到id为agreement的复选框
const agreementCheck = document.getElementById('agreement');
// 输出它的勾选状态：选中就是true，没选就是false
console.log(agreementCheck.checked);
`
举个生活化的例子：这就像你要找同桌有没有带课本，先喊同桌的名字，然后看他面前有没有摆课本——这里checked就是“有没有摆课本”的状态。
实用场景1：单个复选框的交互
网页里最常见的单个复选框操作，就是提交表单前的校验。比如用户没勾选“同意用户协议”，点“提交”按钮时就会弹出提示，不让提交。
我们可以给提交按钮加个点击事件，代码大概是这样：
`javascript
const submitBtn = document.getElementById('submit');
const agreementCheck = document.getElementById('agreement');
submitBtn.addEventListener('click', function() {
if (!agreementCheck.checked) { // 没勾选的情况
alert('请先同意用户协议哦！');
// 阻止表单提交
event.preventDefault();
}
});
`
这个逻辑特别好理解：就像你要进小区，保安要求你先刷门禁卡（对应勾选协议），你没刷的话，保安就不让你进（阻止提交），还会提醒你“请刷卡”。
实用场景2：批量复选框的全选/反选
如果是批量操作，比如电商里的“全选商品”，点击一个按钮就能选完所有商品复选框，这时候就需要操作一组checkbox。它们一般会归为同一类，比如给所有商品复选框加同一个类名product-check，然后用getElementsByClassName找到所有的复选框：
`html
<!-- 商品复选框 -->
<input type="checkbox" class="product-check"> 苹果
<input type="checkbox" class="product-check"> 香蕉
<input type="checkbox" class="product-check"> 橘子
<!-- 全选按钮 -->
<button id="selectAll">全选商品</button>
`
对应的JavaScript：
`javascript
const selectAllBtn = document.getElementById('selectAll');
const productChecks = document.getElementsByClassName('product-check');
selectAllBtn.addEventListener('click', function() {
// 遍历所有商品复选框，把它们的checked设为true
for (let i = 0; i < productChecks.length; i++) {
productChecks[i].checked = true;
}
});
`
如果要做“反选”，就把productChecks[i].checked = true改成!productChecks[i].checked就行——相当于把每个复选框的状态反过来，选了的变没选，没选的变选了。
小技巧：获取选中的复选框数量
有时候我们需要统计选了多少项，比如统计选了几个商品，这时候可以用一个简单的循环：
`javascript
let selectedCount = 0;
for (let i = 0; i < productChecks.length; i++) {
if (productChecks[i].checked) {
selectedCount++; // 每选中一个，数量加1
}
}
console.log('你选了' + selectedCount + '个商品');
`
就像点外卖时，你选了几个商品，系统会自动数出来，这个代码就是做这个事的。
其实JavaScript操作checkbox的核心，就是通过属性找元素，再用checked这个属性读写状态，不管是单个还是批量，都是这个逻辑。平时多结合这些小场景练手，很快就能熟练掌握了。