当前位置：首页 > JavaScript

js 实现全选

2026-04-03 22:39:46JavaScript

实现全选功能的方法

在JavaScript中实现全选功能，可以通过操作DOM元素的checked属性来控制复选框的状态。以下是两种常见的实现方式：

方式一：通过ID获取全选复选框和目标复选框组

js 实现全选

// 获取全选复选框
const selectAll = document.getElementById('selectAll');
// 获取目标复选框组
const checkboxes = document.querySelectorAll('.item-checkbox');

// 监听全选复选框的点击事件
selectAll.addEventListener('change', function() {
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

方式二：通过事件委托实现动态元素的全选

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;
        });
    }
});

反向控制全选状态

当手动勾选部分复选框时，全选复选框的状态需要自动更新：

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

完整示例代码

<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>

<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() {
            const allChecked = Array.from(checkboxes).every(cb => cb.checked);
            selectAll.checked = allChecked;
        });
    });
</script>