


Bagaimana untuk Melaksanakan Kotak Semak 'Pilih Semua' dalam HTML?
Nov 11, 2024 am 05:01 AMMelaksanakan 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!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen

Plugin JS Manipulasi 5 Tarikh Teratas

Tutorial Persediaan API Carian Google Custom
