JavaScript如何实现全选反选_JavaScript复选框全选反选功能代码实现方法

看不見的法師 2025-11-14 00:00:00 次阅读

通过原生JavaScript可实现复选框全选、反选与状态同步：1. 用checkAll控制所有item类复选框的选中状态；2. 通过循环遍历将每个item的checked属性取反实现反选；3. 监听每个子项的change事件，判断是否全部选中以同步“全选”状态。

实现复选框的全选和反选功能是前端开发中常见的需求，JavaScript 提供了简单有效的方式来操作 DOM 元素完成这一功能。下面介绍如何通过原生 JavaScript 实现复选框的全选与反选。

1. HTML 结构准备

首先需要一个“全选”主复选框和多个子复选框：

 全选

 选项1

 选项2

 选项3

 选项4

2. 全选功能实现

监听“全选”复选框的点击事件，将其状态同步给所有子复选框：

document.getElementById('checkAll').onclick = function() {
    const items = document.getElementsByClassName('item');
    for (let i = 0; i < items.length; i++) {
        items[i].checked = this.checked;
    }
};

说明：当“全选”被勾中时，所有 class 为 item 的复选框都被设为选中；取消勾选则全部取消。

3. 反选功能实现

添加一个“反选”按钮，点击时将每个子复选框的状态取反：

document.getElementById('reverseBtn').onclick = function() {
    const items = document.getElementsByClassName('item');
    for (let i = 0; i < items.length; i++) {
        items[i].checked = !items[i].checked;
    }
};

如果想在没有额外按钮的情况下实现反选，也可以绑定在某个快捷键或双击事件上。

4. 智能全选状态同步（可选增强）

当用户手动选择所有子项时，自动勾中“全选”框；当任意一个子项取消时，取消“全选”状态：

const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
    items[i].onchange = function() {
        const checkAll = document.getElementById('checkAll');
        let allChecked = true;
        for (let j = 0; j < items.length; j++) {
            if (!items[j].checked) {
                allChecked = false;
                break;
            }
        }
        checkAll.checked = allChecked;
    };
}