JavaScript代码实现全选功能，轻松搞定批量操作

在日常使用网页应用时，经常会遇到需要批量处理数据的场景，比如邮箱里要删除多封邮件、后台管理系统中要操作一批用户记录。这时候，一个“全选”按钮就显得特别实用。通过几行简单的 ref="/tag/137/" style="color:#B2A89E;font-weight:bold;">JavaScript 代码，就能让页面上的复选框实现一键全选或取消全选。

基本结构：先搭好页面骨架

假设我们有一个简单的列表，每项前面都有一个复选框，最上面还有一个主复选框用来控制全选。HTML 结构大致如下：

<input type="checkbox" id="selectAll"> 全选<br>
<input type="checkbox" class="item" value="1"> 项目1<br>
<input type="checkbox" class="item" value="2"> 项目2<br>
<input type="checkbox" class="item" value="3"> 项目3<br>

用 JavaScript 实现全选逻辑

接下来就是核心部分。我们通过监听“全选”复选框的点击事件，动态控制所有子选项的状态。代码如下：

document.getElementById('selectAll').addEventListener('change', function() {
    const items = document.querySelectorAll('.item');
    items.forEach(item => {
        item.checked = this.checked;
    });
});

这段代码的意思是：当“全选”框状态改变时，获取所有 class 为 item 的复选框，把它们的选中状态设置成和“全选”框一致。简单直接，效果立竿见影。

反向联动：子项影响全选状态

更贴近实际体验的是，当用户手动取消某个子项时，“全选”框也应该自动变成未选中。为了实现这个效果，可以给每个子复选框也加上监听：

const selectAll = document.getElementById('selectAll');
const items = document.querySelectorAll('.item');

items.forEach(item => {
    item.addEventListener('change', function() {
        const allChecked = Array.from(items).every(i => i.checked);
        selectAll.checked = allChecked;
    });
});

这里用到了 Array.from() 和 every() 方法，判断是否每一个子项都被选中。只要有一个没选，“全选”框就会取消勾选，交互更自然。

实际应用场景举例

比如你在管理一个待办事项列表，页面上有几十个任务，想一次性清空已完成的，就可以加个“全选”按钮，点一下全部勾上，再点“批量删除”，效率立马提升。这种交互在后台系统、电商订单管理、邮件系统中非常常见。

代码虽然短，但解决了实际问题。掌握这种基础操作，能让自己的网页交互更贴近用户习惯，也不用每次都依赖框架或插件来实现。