Bagaimana untuk Membuat Kotak Semak 'Pilih Semua' dalam HTML?

Cara Memilih Semua Kotak Pilihan dengan Kotak Semak "Pilih Semua" Tunggal dalam HTML

Mencipta kotak pilihan "pilih semua" dalam halaman HTML membolehkan pilihan mudah berbilang kotak pilihan dengan satu klik. Dengan melaksanakan fungsi ini, anda boleh mempertingkatkan pengalaman pengguna dan memperkemas penyerahan borang.

Untuk melaksanakan kotak pilihan "pilih semua", anda boleh menggunakan JavaScript untuk memanipulasi sifat bertanda semua kotak pilihan lain:

<script type="text/javascript">
  function toggleAll(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"][name="foo"]');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>

Dalam skrip ini, fungsi toggleAll() ditakrifkan untuk menogol keadaan bertanda semua kotak pilihan dengan nama "foo" setiap kali kotak pilihan sumber (kotak pilihan "pilih semua") diklik.

Untuk menggunakan skrip ini, cuma tambah kotak pilihan berikut pada HTML anda:

<input type="checkbox" onclick="toggleAll(this)" /> Select All

Setelah disepadukan, klik kotak pilihan "Pilih Semua" kini akan menogol keadaan bertanda semua kotak pilihan lain pada halaman dengan nama "foo." Ini menyediakan cara yang mudah untuk pengguna memilih semua item dalam bentuk dengan cepat dan mudah.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Kotak Semak 'Pilih Semua' dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!