如何在取消单个复选框时取消全选复选框的选中状态？

你的现有代码已经实现了全选框控制子复选框的功能，但缺少子复选框变化时反向更新全选框的逻辑。要实现需求，需要给每个子复选框添加点击监听，并在每次触发时检查所有子框的选中状态，同步更新全选框。

修改后的完整代码 #

function toggle() {
    let selector = document.querySelector('.chbx_selector');
    let selection = document.querySelectorAll('.chbx_selection');

    // 全选框控制子复选框的逻辑（保留原有功能）
    selector.addEventListener('click', () => {
        if (selector.checked) {
            selectAll(selection);
        } else {
            deselectAll(selection);
        }
    });

    // 给每个子复选框添加点击监听，同步全选框状态
    selection.forEach(chbx => {
        chbx.addEventListener('click', () => {
            // 检查所有子复选框是否都被选中
            const allChecked = Array.from(selection).every(item => item.checked);
            // 更新全选框的选中状态
            selector.checked = allChecked;
        });
    });
}

function selectAll(selection) {
    selection.forEach(chbx => {
        chbx.checked = true;
    });
}

function deselectAll(selection) {
    selection.forEach(chbx => {
        chbx.checked = false;
    });
}

toggle();

关键逻辑说明 #

• 使用Array.from(selection).every(item => item.checked)将NodeList转为数组后，用every方法判断所有子复选框是否都处于选中状态：
  • 只要有一个子框未选中，every就返回false，此时全选框会被取消选中；
  • 只有所有子框都选中时，every返回true，全选框保持选中。
• 给每个子复选框绑定点击事件，确保每次用户手动勾选/取消子框时，都会触发状态检查和同步。

内容的提问来源于stack exchange，提问作者Max Sien