Bagaimanakah saya boleh menukar kotak pilihan yang dipilih (pilih semua) selepas menyahtanda salah satu kotak pilihan berikut?

Question

Saya baru sahaja mencipta skrip semak semua dalam JS tetapi tidak tahu cara melaksanakannya untuk menyemak sama ada semua kotak semak saya masih ditandakan dan jika tidak - nyahtanda kotak semak "pilih semua" saya. Sebarang idea tentang cara melakukan ini?

Ini kod saya, sila lihat, JS tulen

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

Saya nampaknya telah kehabisan kapasiti mental untuk menyelesaikan masalah, walaupun saya masih cuba melakukan sesuatu dengan jenis klik eventListener dengan harapan dapat mencapai hasil yang diinginkan. Sebarang bantuan amat dihargai.

Answer 1

Anda boleh menetapkan pendengar acara pada kotak pilihan yang tidak dipilih. Dalam acara ini, anda boleh menyemak keadaan kotak semak yang ditandakan dan jika ia tidak ditandakan maka kemas kini kotak semak untuk menyahtandanya.

Dengan cara ini, semua kotak pilihan anda akan kekal segerak selagi anda menyahtanda mana-mana kotak pilihan lain.