JavaScript 实现全选功能的方法

在网页开发中，全选功能是一个常见且实用的交互需求。通过 JavaScript 可以轻松实现这一功能，为用户提供便捷的操作体验。下面将介绍几种常见的实现方式。

基本的全选逻辑

HTML 结构中通常会有多个复选框，以及一个用于控制全选的主复选框。例如：

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

在 JavaScript 中，我们可以通过获取这些元素，并添加事件监听器来实现全选功能。

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

selectAll.addEventListener('change', function() {
    const isChecked = this.checked;
    items.forEach(function(item) {
        item.checked = isChecked;
    });
});

这段代码的逻辑是，当全选复选框状态改变时，遍历所有选项复选框，并将它们的状态设置为与全选复选框一致。

反向全选与状态同步

仅仅实现正向全选是不够的，还需要实现反向全选，即当所有选项都被选中时，全选复选框自动选中；当有一个选项被取消选中时，全选复选框自动取消选中。

items.forEach(function(item) {
    item.addEventListener('change', function() {
        let allChecked = true;
        items.forEach(function(subItem) {
            if (!subItem.checked) {
                allChecked = false;
                return;
            }
        });
        selectAll.checked = allChecked;
    });
});

这段代码为每个选项复选框添加了 change 事件监听器。每次选项状态改变时，遍历所有选项复选框，检查是否全部被选中。如果全部被选中，则将全选复选框设置为选中状态；否则，设置为未选中状态。

优化与兼容性

在实际应用中，还需要考虑兼容性问题，例如不同浏览器对事件的支持等。可以将上述逻辑封装成函数，以便在不同场景下复用。

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

    selectAll.addEventListener('change', function() {
        const isChecked = this.checked;
        items.forEach(function(item) {
            item.checked = isChecked;
        });
    });

    items.forEach(function(item) {
        item.addEventListener('change', function() {
            let allChecked = true;
            items.forEach(function(subItem) {
                if (!subItem.checked) {
                    allChecked = false;
                    return;
                }
            });
            selectAll.checked = allChecked;
        });
    });
}

window.addEventListener('DOMContentLoaded', initSelectAll);

通过将逻辑封装在 initSelectAll 函数中，并在页面加载完成后调用该函数，可以确保在页面元素加载完成后才执行全选功能的初始化，提高代码的稳定性和兼容性。

通过合理运用 JavaScript 的事件机制和 DOM 操作，我们可以轻松实现全选功能，并根据实际需求进行优化和扩展。这不仅提升了用户体验，也为网页开发增添了更多实用的交互功能。