Comment puis-je modifier les cases sélectionnées (sélectionner tout) après avoir décoché l'une des cases suivantes ?

Question

Je viens de créer le script check all en JS mais je ne sais pas comment l'implémenter pour vérifier si toutes mes cases sont toujours cochées et sinon, décochez ma case "Sélectionner tout". auriez vous des idées pour faire ça?

Voici mon code, s'il vous plaît jetez un oeil, pur JS

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

    selector.addEventListener('click', () => {
        if (selector.checked === true) {
            selectAll(selection)
        }
        else {
            deselectAll(selection)
        }

    });
}

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

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

toggle()

Il semble que j'ai épuisé ma capacité mentale à résoudre le problème, même si j'essaie toujours de faire quelque chose avec le type de clic eventListener dans l'espoir d'obtenir le résultat souhaité. Toute aide est appréciée.

Answer 1

Vous pouvez définir des écouteurs d'événements sur des cases à cocher non sélectionnées. Dans ce cas, vous pouvez vérifier l'état coché de la case et si elle n'est pas cochée, mettre à jour la case pour la décocher.

De cette façon, toutes vos cases resteront synchronisées tant que vous décocherez les autres cases.