当前位置：首页 > JavaScript

全选js实现

2026-04-06 11:44:00JavaScript

全选功能的实现方法

在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件，并根据其状态设置其他复选框的选中状态。

基础实现示例

全选js实现

// 获取全选复选框和所有子复选框
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实现

const tableSelectAll = document.getElementById('tableSelectAll');
const tableCheckboxes = document.querySelectorAll('table tbody input[type="checkbox"]');

tableSelectAll.addEventListener('change', function() {
    tableCheckboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

tableCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const allChecked = Array.from(tableCheckboxes).every(cb => cb.checked);
        tableSelectAll.checked = allChecked;
    });
});

注意事项

确保HTML中全选复选框和子复选框有正确的ID或类名
考虑性能优化，当有大量复选框时可能需要分批处理
对于动态加载的内容，需要使用事件委托或重新绑定事件

完整HTML示例

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

以上代码提供了全选功能的基本实现方式，可以根据具体需求进行调整和扩展。