Tulisan ini akan menerangkan prosedur untuk menyemak dan menyahtanda kotak semak menggunakan JavaScript.
Bagaimana untuk Semak/Nyahtanda Kotak Semak Menggunakan JavaScript?
Untuk menandai atau menyahtanda kotak semak dalam JavaScript, gunakan ' diperiksa ” atribut. Mula-mula, dapatkan rujukan elemen HTML ' kotak semak 'dengan bantuan yang ditugaskan' ID ' menggunakan ' getElementById() ' kaedah, dan kemudian, gunakan ' diperiksa ” harta pada nilainya.
Contoh 1: Tandai/Nyahtanda Kotak Semak Tunggal
Mula-mula, buat fail HTML, dengan baris kod berikut:
< h3 > Klik butang untuk menandai atau menyahtanda kotak pilihan h3 >
< jenis input = 'kotak semak' ID = 'kotak semak' > Setuju dengan terma dan syarat < br >< br >
< jenis butang = 'butang' onclick = 'semak()' > ya butang >
< jenis butang = 'butang' onclick = 'nyahtanda ()' > Tidak butang >
Dalam kod di atas:
- Buat kotak semak, dengan id ' kotak semak ' yang akan digunakan untuk mengakses elemen ' kotak semak ” untuk melakukan tindakan.
- Buat dua butang, ' ya ” dan “ Tidak ”, untuk menandai atau menyahtanda kotak semak yang akan mencetuskan fungsi “ semak() ” dan “ nyahtanda () ” masing-masing pada acara klik.
Selepas melaksanakan kod di atas, output akan seperti ini:
Seterusnya, tentukan fungsi untuk melakukan tindakan pada kotak pilihan dalam fail JavaScript atau teg. Untuk menyemak kotak semak, gunakan baris kod di bawah:
fungsi semak ( ) {
biarkan input = dokumen. getElementById ( 'kotak semak' ) ;
input. diperiksa = benar ;
}
Dalam kod di atas:
- Tentukan fungsi ' semak() ” yang akan mencetuskan klik butang untuk menyemak kotak semak.
- Di dalam badan fungsi, dapatkan rujukan kotak semak menggunakan idnya ' kotak semak 'dengan bantuan daripada' getElementById() ' kaedah dan simpannya dalam pembolehubah ' input ”.
- Tandai kotak semak dengan menetapkan ' diperiksa 'harta benda' benar ”.
Untuk menyahtanda kotak semak dengan mengklik ' Tidak ”, gunakan kod yang diberikan di bawah:
fungsi nyahtanda ( ) {biarkan input = dokumen. getElementById ( 'kotak semak' ) ;
input. diperiksa = salah ;
}
Coretan kod di atas:
- Tentukan fungsi ' nyahtanda () ” yang akan mencetuskan klik butang untuk menyahtanda kotak semak.
- Di dalam badan fungsi, dapatkan rujukan kotak semak menggunakan idnya ' kotak semak 'dengan bantuan daripada' getElementById() ' kaedah dan simpannya dalam pembolehubah ' input ”.
- Nyahtanda kotak semak dengan menetapkan ' diperiksa 'harta benda' salah ”.
Akhir sekali, tentukan fungsi untuk menyahtanda kotak semak secara lalai pada pemuatan halaman menggunakan ' window.onload ' acara:
tingkap. memuatkan = fungsi ( ) {tingkap. addEventListener ( 'muat' , semak , salah ) ;
}
Pengeluaran
Output menandakan bahawa kotak semak telah ditanda dan dinyahtandai dengan jayanya semasa mengklik pada butang.
Contoh 2: Tandakan/Nyahtanda Berbilang Kotak Semak
Mari lihat contoh cara untuk menandai atau menyahtanda semua kotak pilihan pada masa yang sama.
Mula-mula, buat fail HTML, dan kemudian buat berbilang kotak semak dan butang dengan id “ togol ” yang akan menogol kotak pilihan untuk menandai atau menyahtanda:
< h3 > Klik butang untuk menandai atau menyahtanda semua kotak pilihan h3 >< jenis input = 'kotak semak' kelas = 'kotak semak' > Tandai atau nyahtanda saya < br >
< jenis input = 'kotak semak' kelas = 'kotak semak' > Tandai atau nyahtanda saya < br >
< jenis input = 'kotak semak' kelas = 'kotak semak' > Tandai atau nyahtanda saya < br >
< jenis input = 'kotak semak' kelas = 'kotak semak' > Tandai atau nyahtanda saya < br >
< jenis input = 'kotak semak' kelas = 'kotak semak' > Tandai atau nyahtanda saya < br >< br >
< jenis input = 'butang' ID = 'togol' nilai = 'Klik untuk menogol kotak pilihan' >
Output yang sepadan ialah:
Selepas itu, dalam fail JavaScript atau teg