当前位置：首页 > JavaScript

js实现全选

2026-02-28 17:46:54JavaScript

实现全选功能的方法

在JavaScript中实现全选功能通常涉及以下步骤，适用于复选框（checkbox）场景：

获取DOM元素

通过querySelector或getElementById获取全选按钮和子复选框的DOM元素。例如：

js实现全选

const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.item-checkbox');

绑定全选按钮事件

为全选按钮添加change事件监听器，根据全选按钮的状态设置子复选框的选中状态：

js实现全选

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

子复选框反向控制全选状态

当子复选框状态变化时，检查是否所有子项已选中，自动更新全选按钮状态：

checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        selectAll.checked = [...checkboxes].every(c => c.checked);
    });
});

完整代码示例

<!-- HTML结构 -->
<input type="checkbox" id="selectAll"> 全选
<div class="items">
    <input type="checkbox" class="item-checkbox"> 选项1
    <input type="checkbox" class="item-checkbox"> 选项2
    <input type="checkbox" class="item-checkbox"> 选项3
</div>

<script>
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.item-checkbox');

    // 全选控制子项
    selectAll.addEventListener('change', function() {
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });

    // 子项影响全选状态
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            selectAll.checked = [...checkboxes].every(c => c.checked);
        });
    });
</script>

注意事项

性能优化：如果子复选框数量较多（如超过1000个），建议使用事件委托代替单独绑定事件。
部分选中状态：可通过CSS或三方库实现中间状态（如indeterminate属性）。
框架适配：在Vue/React等框架中，推荐使用数据驱动的方式管理选中状态。

扩展场景：表格行全选

若应用于表格行选择，需注意动态新增行的处理，可通过事件委托或重新绑定事件实现：

document.getElementById('table').addEventListener('change', function(e) {
    if (e.target.classList.contains('row-checkbox')) {
        selectAll.checked = [...checkboxes].every(c => c.checked);
    }
});