Bagaimana untuk memilih semua dalam javascript

Dengan pembangunan aplikasi web, semakin banyak aplikasi web perlu menyediakan fungsi pilih semua, supaya pengguna boleh memilih atau membatalkan banyak pilihan pada halaman pada masa yang sama. Dalam Javascript, sangat mudah untuk melaksanakan fungsi pilih semua. Artikel ini akan memperkenalkan cara menggunakan Javascript untuk melaksanakan fungsi pilih semua.

Pertama, kita perlu menambah kotak pilihan pilih semua pada halaman HTML. Kotak semak ini perlu mempunyai pengecam khusus, dalam kes kami, kami menggunakan "pilihSemua" sebagai pengecam. Kotak pilihan ini harus diletakkan di atas kotak pilihan lain untuk menjelaskan tujuannya kepada pengguna.

<input type="checkbox" id="selectAll"> 全选

Kemudian, dalam Javascript, kita perlu memilih semua kotak pilihan lain dan memastikan keadaan yang ditandakan konsisten dengan semua kotak pilihan yang dipilih. Ini boleh dilakukan dengan mudah menggunakan fungsi $() dalam rangka kerja Javascript. Kod untuk memilih semua kotak pilihan lain kelihatan seperti ini:

var checkboxes = document.querySelectorAll('input[type=checkbox]:not(#selectAll)');

Seterusnya, kita boleh menggunakan fungsi forEach() untuk melelaran melalui semua kotak pilihan dan menukar keadaan pilihannya apabila keadaan kotak pilihan semua berubah. Pelarasan. Lihat kod di bawah:

var selectAll = document.getElementById('selectAll');
var checkboxes = document.querySelectorAll('input[type=checkbox]:not(#selectAll)');

selectAll.addEventListener('change', function () {
    checkboxes.forEach(function (checkbox) {
        checkbox.checked = selectAll.checked;
    });
});

Akhir sekali, kita perlu memastikan bahawa status setiap kotak pilihan lain juga dipantau supaya status semua kotak pilihan yang dipilih dikemas kini jika perlu. Kita boleh melakukan ini dengan mudah menggunakan coretan kod berikut:

checkboxes.forEach(function (checkbox) {
    checkbox.addEventListener('change', function () {
        var allChecked = true;
        for (var i = 0; i < checkboxes.length; i++) {
            if (!checkboxes[i].checked) {
                allChecked = false;
                break;
            }
        }
        selectAll.checked = allChecked;
    });
});

Ini akan mengendalikan perubahan keadaan kedua-dua kotak pilihan semua dan kotak pilihan lain untuk memastikan bahawa pilihan sentiasa terkini.

Setakat ini, kami telah berjaya melaksanakan fungsi pilih semua. Kod lengkap adalah seperti berikut:

<input type="checkbox" id="selectAll"> 全选

 选项 1
 选项 2
 选项 3
 选项 4

<script>
    var selectAll = document.getElementById('selectAll');
    var checkboxes = document.querySelectorAll('input[type=checkbox]:not(#selectAll)');

    selectAll.addEventListener('change', function () {
        checkboxes.forEach(function (checkbox) {
            checkbox.checked = selectAll.checked;
        });
    });

    checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            var allChecked = true;
            for (var i = 0; i < checkboxes.length; i++) {
                if (!checkboxes[i].checked) {
                    allChecked = false;
                    break;
                }
            }
            selectAll.checked = allChecked;
        });
    });
</script>

Dalam aplikasi sebenar, ia boleh disesuaikan mengikut keperluan khusus. Sebagai contoh, anda boleh menukar gaya elemen lain apabila semua dipilih, atau memasukkan elemen bentuk lain seperti pautan dan kotak teks dalam pilihan. Walau apa pun, Javascript menyediakan penyelesaian yang ringkas tetapi berfungsi yang boleh membantu kami melaksanakan pelbagai fungsi pilih-semua dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk memilih semua dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!