Bagaimana untuk Melaksanakan Kotak Semak "Pilih Semua" dalam HTML?

Melaksanakan Kotak Semak "Pilih Semua" dalam HTML

Dalam pembangunan web, adalah perkara biasa untuk menghadapi situasi di mana pengguna perlu memilih berbilang item daripada senarai. Penyelesaian serba boleh untuk memudahkan proses ini adalah dengan melaksanakan kotak semak "Pilih Semua". Apabila ditandakan, kotak pilihan ini harus memilih semua kotak pilihan lain secara automatik pada halaman.

Penyelesaian JavaScript

Untuk mencapai fungsi ini, anda boleh menggunakan JavaScript. Berikut ialah coretan kod yang menunjukkan pelaksanaan:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].checked = source.checked;
  }
}

Integrasi HTML

Sertakan fungsi JavaScript ke dalam kod HTML anda seperti berikut:

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

<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 />

Berfungsi Kelakuan

Apabila kotak pilihan "Togol Semua" ditandakan, semua kotak pilihan lain akan dipilih. Menyahtanda ia akan menyahpilih semua kotak pilihan lain. Ini membolehkan pengguna memilih atau menyahpilih berbilang item dengan pantas dengan hanya satu klik.

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