Bagaimana untuk Mencipta Kotak Semak 'Pilih Semua' yang Mengawal Kotak Semak Lain?

Cara Melaksanakan Kotak Semak yang Memilih Semua Kotak Semak Lain

Melaksanakan kotak pilihan "pilih semua" dalam HTML membolehkan anda menogol pilihan yang dipilih dengan mudah keadaan beberapa kotak pilihan lain pada halaman.

Penyelesaian:

Untuk mencapai kefungsian ini:

1. Buat teg skrip dengan kod JavaScript berikut:

<script>
function toggle(source) {
  const checkboxes = document.getElementsByName('foo');
  for (let i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = source.checked;
  }
}
</script>

2. Dalam dokumen HTML anda, tambahkan kod berikut untuk mencipta "Pilih Semua" kotak semak:

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br />

3. Tambahkan kod berikut untuk kotak pilihan individu anda:

<input type="checkbox" name="foo" value="bar1"> Bar 1<br />
<input type="checkbox" name="foo" value="bar2"> Bar 2<br />
<input type="checkbox" name="foo" value="bar3"> Bar 3<br />
<input type="checkbox" name="foo" value="bar4"> Bar 4<br />

Apabila anda mengklik kotak pilihan "Pilih Semua", skrip akan menggelung melalui semua kotak pilihan dengan nama "foo" dan menetapkan harta yang ditandakan untuk dipadankan dengan keadaan yang ditanda "Pilih Semua" kotak semak.

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