JavaScript实现全选功能|极客笔记

JavaScript实现全选功能

在网页开发过程中，经常会遇到需要对列表或表格中的多个选择框进行全选或反选操作的需求。这时候我们就可以通过JavaScript来实现全选功能。在本文中，我们将介绍如何使用JavaScript来实现全选功能，并给出具体的代码示例。

HTML结构

首先，我们需要在HTML文件中定义一个多选框列表，用于展示需要进行选择的项目。以下是一个简单的HTML结构示例，包含了一个全选复选框和多个子复选框：

<!DOCTYPE html>
<html>
<head>
    <title>全选功能示例</title>
</head>
<body>
    <input type="checkbox" id="checkAll">全选

    <br />

    <input type="checkbox" class="checkbox-item">选项1
    <input type="checkbox" class="checkbox-item">选项2
    <input type="checkbox" class="checkbox-item">选项3
</body>
</html>

在上面的代码中，我们首先定义了一个全选复选框，其id为checkAll，然后定义了三个子复选框，它们的class均为checkbox-item。

JavaScript实现全选功能

接下来，我们使用JavaScript来实现全选功能。我们首先通过document.getElementById方法获取全选复选框和子复选框的引用，并为全选复选框添加点击事件，当点击全选复选框时，遍历所有子复选框并设置它们的checked属性。

document.addEventListener('DOMContentLoaded', function() {
    const checkAll = document.getElementById('checkAll');
    const checkboxItems = document.getElementsByClassName('checkbox-item');

    checkAll.addEventListener('click', function() {
        Array.from(checkboxItems).forEach(item => {
            item.checked = checkAll.checked;
        });
    });
});

上面的代码中，我们通过document.addEventListener方法在DOM加载完成后执行代码，首先获取全选复选框和子复选框的引用，然后为全选复选框添加了一个点击事件监听器。当点击全选复选框时，遍历所有子复选框，并根据全选复选框的状态设置子复选框的checked属性。