当前位置：首页 > JavaScript

js 实现全选

2026-01-16 12:16:33JavaScript

实现全选功能的方法

使用 JavaScript 实现全选功能通常需要操作复选框（checkbox）的状态。以下是几种常见的实现方式。

js 实现全选

通过 DOM 操作实现全选

// 获取全选复选框和子复选框
const selectAllCheckbox = document.getElementById('selectAll');
const itemCheckboxes = document.querySelectorAll('.item-checkbox');

// 全选复选框事件监听
selectAllCheckbox.addEventListener('change', function() {
    itemCheckboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// 子复选框事件监听（用于取消全选状态）
itemCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        if (!this.checked) {
            selectAllCheckbox.checked = false;
        } else {
            // 检查是否所有子复选框都被选中
            const allChecked = Array.from(itemCheckboxes).every(cb => cb.checked);
            selectAllCheckbox.checked = allChecked;
        }
    });
});

使用事件委托优化性能

如果子复选框是动态生成的，可以使用事件委托减少事件监听器的数量。

js 实现全选

document.addEventListener('change', function(e) {
    if (e.target.id === 'selectAll') {
        const checkboxes = document.querySelectorAll('.item-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = e.target.checked;
        });
    }

    if (e.target.classList.contains('item-checkbox')) {
        const checkboxes = document.querySelectorAll('.item-checkbox');
        const allChecked = Array.from(checkboxes).every(cb => cb.checked);
        document.getElementById('selectAll').checked = allChecked;
    }
});

使用 jQuery 实现全选

如果项目中使用了 jQuery，可以简化代码。

$('#selectAll').change(function() {
    $('.item-checkbox').prop('checked', this.checked);
});

$('.item-checkbox').change(function() {
    $('#selectAll').prop('checked', $('.item-checkbox:checked').length === $('.item-checkbox').length);
});