js全选复选框怎么实现

实现全选复选框的方法

通过监听全选复选框的点击事件，获取所有需要被控制的子复选框，并根据全选状态设置子复选框的选中状态。

document.getElementById('selectAll').addEventListener('click', function() {
    const checkboxes = document.querySelectorAll('.item-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

处理子复选框状态变化

当子复选框状态变化时，检查是否所有子复选框都被选中，如果是，则自动选中全选复选框；否则取消全选复选框的选中状态。

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

HTML结构示例

确保HTML中包含全选复选框和子复选框，并为它们设置合适的类名或ID。

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

使用jQuery简化实现

如果项目中使用了jQuery，可以通过更简洁的代码实现相同功能。

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

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

注意事项

确保在DOM加载完成后执行JavaScript代码，可以将代码放在DOMContentLoaded事件监听器中或放在文档底部。

document.addEventListener('DOMContentLoaded', function() {
    // 全选复选框的实现代码
});