Artikel ini akan menunjukkan metode untuk mencentang dan menghapus centang semua kotak centang menggunakan JavaScript.
Bagaimana Cara Memeriksa dan Menghapus Centang Semua Kotak Centang menggunakan JavaScript?
Untuk mencentang dan menghapus centang semua kotak centang di JavaScript, Anda dapat menerapkan:
- “ document.getElementsByName ” metode dengan Kotak Centang
- “ document.getElementsByName ” metode dengan Tombol
Pendekatan yang disebutkan sekarang akan dibahas satu per satu!
Metode 1: Centang dan Hapus centang Semua Kotak Centang di JavaScript Menggunakan Metode 'document.getElementsByName()' Dengan 'Kotak Centang'
' document.getElementsByName() ” metode mengembalikan elemen dengan nama yang ditentukan dalam argumennya. Metode ini akan diterapkan untuk mengambil nilai setiap kotak centang dengan bantuan nama yang diteruskan.
Mari kita lihat contoh berikut untuk demonstrasi.
Contoh
Pertama, jenis input akan ditentukan sebagai “ kotak centang ” dan nama serta nilai tertentu akan diberikan pada setiap kotak centang:
< tipe masukan = 'kotak centang' nama = 'hanya' nilai = 'Piton' > Python < br />< tipe masukan = 'kotak centang' nama = 'hanya' nilai = 'Jawa' > Jawa < br />
< tipe masukan = 'kotak centang' nama = 'hanya' nilai = 'JavaScript' > JavaScript < br />
Sekarang, sertakan kotak centang tambahan dengan nilai “ Periksa Semua ” dan lampirkan “ klik() ” dengan kotak centang ini yang akan bekerja sedemikian rupa ketika kotak centang akan diklik, “ cekTidak dicentang ()” metode akan dipanggil dengan objek “ ini ” sebagai argumen:
< tipe masukan = 'kotak centang' klik = 'centangHapus centang (ini)' /> Periksa Semua < br />
Setelah itu, tentukan fungsi bernama “ centangHapus centang() ” dalam file JavaScript, dengan variabel bernama “ kotak centang ” sebagai argumen. Sekarang, akses nilai kotak centang menggunakan ' document.getElementsByName() ” dan tempatkan nilai dari “ nama ” sebagai argumennya.
Terakhir, terapkan ' untuk ” loop untuk mengulangi semua nilai kotak centang dan memanfaatkan “ diperiksa ” properti untuk menandai semuanya sebagai dicentang:
fungsi centangHapus centang ( kotak centang ) {Dapatkan = dokumen. getElementsByName ( 'hanya' ) ;
untuk ( berada di = 0 ; saya < Dapatkan. panjangnya ; saya ++ ) {
Dapatkan [ saya ] . diperiksa = kotak centang. diperiksa ; }
}
Seperti yang Anda lihat, ketika ' Periksa Semua ” kotak centang ditandai, semua kotak centang lainnya juga ditandai sebagai dicentang:
Metode 2: Centang dan Hapus centang Semua Kotak Centang di JavaScript Menggunakan Metode 'document.getElementsByName()' Dengan 'Tombol'
' document.getElementsByName() ”, seperti yang dibahas dalam metode sebelumnya, mengambil elemen dengan nama yang ditentukan dalam argumennya. Ini dapat digunakan untuk mencentang atau menghapus centang semua kotak centang yang ditambahkan di halaman web.
Perhatikan contoh berikut untuk demonstrasi.
Contoh
Sekarang, kami akan menyertakan dua tombol untuk kedua ' Cek Semua ' dan ' Jangan tandai semua ” fungsi. Kemudian, lampirkan “ klik ” dengan kedua tombol yang akan mengakses fungsi yang ditentukan secara terpisah:
< tipe masukan = 'tombol' klik = 'memeriksa()' nilai = 'Cek Semua' />< tipe masukan = 'tombol' klik = 'hapus centang ()' nilai = 'Hapus Centang Semua' />
Selanjutnya, tentukan fungsi bernama “ memeriksa() ” dan menerapkan “ document.getElementsByName ” dengan nilai tertentu dari “ nama ” atribut. Kemudian, ulangi ' untuk ” loop di sepanjang semua nilai kotak centang yang dibahas dalam metode sebelumnya.
Selain itu, ketika tombol terkait diklik, ' diperiksa ” properti akan menandai semua kotak centang dan menetapkan status yang dicentang sebagai “ BENAR ”:
pemeriksaan fungsi ( ) {jadilah kambing = dokumen. getElementsByName ( 'memeriksa' ) ;
untuk ( berada di = 0 ; saya < Dapatkan. panjangnya ; saya ++ ) {
Dapatkan [ saya ] . diperiksa = BENAR ; }
}
Selanjutnya, tentukan fungsi bernama “ hapus centang() ”, dan tambahkan fungsi terbalik di dalamnya untuk menandai properti kotak yang dicentang sebagai “ Salah ”:
fungsi hapus centang ( ) {jadilah kambing = dokumen. getElementsByName ( 'memeriksa' ) ;
untuk ( berada di = 0 ; saya < Dapatkan. panjangnya ; saya ++ ) {
Dapatkan [ saya ] . diperiksa = Salah ; }
}
Itu dapat melihat di output bahwa tombol yang ditambahkan berfungsi dengan baik:
Kami telah menyediakan metode termudah untuk mencentang dan menghapus centang semua kotak centang menggunakan JavaScript.
Kesimpulan
Untuk mencentang dan menghapus centang semua kotak centang menggunakan JavaScript, gunakan ' document.getElementsByName() ” metode dengan “ kotak centang ” untuk menambahkan kotak centang dan mengakses fungsi, yang akan mengakibatkan kotak centang dicentang atau menerapkan metode yang sama dengan “ Tombol ” untuk menyertakan dua tombol secara terpisah untuk memeriksa dan menghapus centang semua nilai yang ditentukan. Artikel ini menjelaskan metode untuk mencentang dan menghapus centang pada semua kotak centang menggunakan JavaScript.