Artikel ini akan menjelaskan prosedur untuk mencentang dan menghapus centang pada kotak centang menggunakan JavaScript.
Bagaimana Cara Mencentang/Menghapus Centang Kotak Menggunakan JavaScript?
Untuk mencentang atau menghapus centang pada kotak centang di JavaScript, gunakan “ diperiksa ” atribut. Pertama, dapatkan referensi elemen HTML “ kotak centang ” dengan bantuan yang ditugaskan “ Indo ' menggunakan ' getElementById() ” metode, dan kemudian, terapkan metode “ diperiksa ” properti pada nilainya.
Contoh 1: Centang/Hapus centang pada Kotak Centang Tunggal
Pertama, buat file HTML, dengan baris kode berikut:
< h3 > Klik tombol untuk mencentang atau menghapus centang pada kotak centang h3 >
< tipe masukan = 'kotak centang' Indo = 'kotak centang' > Setuju dengan syarat dan ketentuan < br >< br >
< jenis tombol = 'tombol' onclick = 'memeriksa()' > Ya tombol >
< jenis tombol = 'tombol' onclick = 'hapus centang ()' > Tidak tombol >
Dalam kode di atas:
- Buat kotak centang, dengan id “ kotak centang ” yang akan digunakan untuk mengakses elemen “ kotak centang ” untuk melakukan tindakan.
- Buat dua tombol, “ Ya ' dan ' Tidak ”, untuk mencentang atau menghapus centang pada kotak centang yang akan memicu fungsi “ memeriksa() ' dan ' hapus centang() ” masing-masing pada acara klik.
Setelah mengeksekusi kode di atas, hasilnya akan seperti ini:
Selanjutnya, tentukan fungsi untuk melakukan tindakan pada kotak centang di file JavaScript atau tag. Untuk mencentang kotak centang, gunakan baris kode di bawah ini:
fungsi memeriksa ( ) {
biarkan masukan = dokumen. getElementById ( 'kotak centang' ) ;
memasukkan. diperiksa = BENAR ;
}
Dalam kode di atas:
- Tentukan fungsi “ memeriksa() ” yang akan memicu klik tombol untuk mencentang kotak centang.
- Di dalam badan fungsi, dapatkan referensi kotak centang menggunakan id ' kotak centang ” dengan bantuan “ getElementById() ” metode dan menyimpannya dalam variabel “ memasukkan ”.
- Centang kotak centang dengan menyetel “ diperiksa ' Properti ' BENAR ”.
Untuk menghapus centang pada kotak centang dengan mengklik “ Tidak ”, gunakan kode yang diberikan di bawah ini:
fungsi hapus centang ( ) {biarkan masukan = dokumen. getElementById ( 'kotak centang' ) ;
memasukkan. diperiksa = Salah ;
}
Cuplikan kode di atas:
- Tentukan fungsi “ hapus centang() ” yang akan memicu klik tombol untuk menghapus centang pada kotak centang.
- Di dalam badan fungsi, dapatkan referensi kotak centang menggunakan id ' kotak centang ” dengan bantuan “ getElementById() ” metode dan menyimpannya dalam variabel “ memasukkan ”.
- Hapus centang pada kotak centang dengan menyetel “ diperiksa ' Properti ' Salah ”.
Terakhir, tentukan fungsi untuk menghapus centang pada kotak centang secara default pada pemuatan halaman menggunakan ' window.onload ' peristiwa:
jendela. memuat = fungsi ( ) {jendela. addEventListener ( 'memuat' , memeriksa , Salah ) ;
}
Keluaran
Output menandakan bahwa kotak centang berhasil dicentang dan tidak dicentang saat mengklik tombol.
Contoh 2: Centang/Hapus centang Beberapa Kotak Centang
Mari kita lihat contoh cara mencentang atau menghapus centang semua kotak centang secara bersamaan.
Pertama, buat file HTML, lalu buat beberapa kotak centang dan tombol dengan id ' beralih ” yang akan mengaktifkan kotak centang untuk mencentang atau menghapus centang:
< h3 > Klik tombol untuk mencentang atau menghapus centang semua kotak centang h3 >< tipe masukan = 'kotak centang' kelas = 'kotak centang' > Centang atau hapus centang saya < br >
< tipe masukan = 'kotak centang' kelas = 'kotak centang' > Centang atau hapus centang saya < br >
< tipe masukan = 'kotak centang' kelas = 'kotak centang' > Centang atau hapus centang saya < br >
< tipe masukan = 'kotak centang' kelas = 'kotak centang' > Centang atau hapus centang saya < br >
< tipe masukan = 'kotak centang' kelas = 'kotak centang' > Centang atau hapus centang saya < br >< br >
< tipe masukan = 'tombol' Indo = 'beralih' nilai = 'Klik untuk mengganti kotak centang' >
Output yang sesuai adalah:
Setelah itu, dalam file JavaScript atau tag