Artikel ini akan menunjukkan kaedah untuk menyemak dan menyahtanda semua kotak pilihan menggunakan JavaScript.
Bagaimana untuk Semak dan Nyahtanda Semua Kotak Semak menggunakan JavaScript?
Untuk menandai dan menyahtanda semua kotak pilihan dalam JavaScript, anda boleh memohon:
- “ document.getElementsByName ” kaedah dengan Kotak Semak
- “ document.getElementsByName ” kaedah dengan Butang
Pendekatan yang disebutkan kini akan dibincangkan satu persatu!
Kaedah 1: Semak dan Nyahtanda Semua Kotak Semak dalam JavaScript Menggunakan Kaedah 'document.getElementsByName()' Dengan 'Kotak Semak'
' document.getElementsByName() ” kaedah mengembalikan elemen dengan nama yang ditentukan dalam hujahnya. Kaedah ini akan digunakan untuk mengambil nilai setiap kotak semak dengan bantuan nama yang diluluskan.
Mari kita lihat contoh berikut untuk demonstrasi.
Contoh
Pertama, jenis input akan ditentukan sebagai ' kotak semak ” dan nama dan nilai tertentu akan diberikan pada setiap kotak pilihan:
< jenis input = 'kotak semak' nama = 'hanya' nilai = 'Python' > Ular sawa < br />< jenis input = 'kotak semak' nama = 'hanya' nilai = 'Jawa' > Jawa < br />
< jenis input = 'kotak semak' nama = 'hanya' nilai = 'JavaScript' > JavaScript < br />
Sekarang, masukkan kotak pilihan tambahan dengan nilai “ Memeriksa semua ” dan lampirkan “ onclick() ' acara dengan kotak semak ini yang akan berfungsi sedemikian rupa apabila kotak semak akan diklik, ' semakTidak ditanda ()' kaedah akan digunakan dengan objek ' ini ” sebagai hujah:
< jenis input = 'kotak semak' onclick = 'checkNyahtanda(ini)' /> Memeriksa semua < br />
Selepas itu, tentukan fungsi bernama ' semakNyahtanda() ” dalam fail JavaScript, dengan pembolehubah bernama “ kotak semak ” sebagai hujah. Sekarang, akses nilai kotak semak menggunakan ' document.getElementsByName() kaedah ” dan letakkan nilai “ nama ” atribut sebagai hujahnya.
Akhir sekali, gunakan ' untuk ' gelung untuk melelaran sepanjang semua nilai kotak semak dan menggunakan ' diperiksa ” harta untuk menandakan mereka semua sebagai ditandakan:
semak fungsiNyahtanda ( kotak semak ) {dapatkan = dokumen. getElementsByName ( 'hanya' ) ;
untuk ( di dalam = 0 ; i < dapatkan. panjang ; i ++ ) {
dapatkan [ i ] . diperiksa = kotak semak. diperiksa ; }
}
Seperti yang anda lihat, apabila ' Memeriksa semua ” kotak semak ditanda, semua kotak pilihan lain juga ditandakan sebagai ditandai:
Kaedah 2: Semak dan Nyahtanda Semua Kotak Semak dalam JavaScript Menggunakan Kaedah 'document.getElementsByName()' Dengan 'Butang'
' document.getElementsByName() ” kaedah, seperti yang dibincangkan dalam kaedah sebelumnya, mengambil elemen dengan nama yang ditentukan dalam hujahnya. Ia boleh digunakan untuk menandai atau menyahtanda semua kotak pilihan yang ditambahkan pada halaman web.
Lihat contoh berikut untuk demonstrasi.
Contoh
Sekarang, kami akan memasukkan dua butang untuk kedua-dua ' Semak Semua ” dan “ Nyahtanda Semua ” fungsi. Kemudian, lampirkan ' onclick ” acara dengan kedua-dua butang yang akan mengakses fungsi yang ditentukan secara berasingan:
< jenis input = 'butang' onclick = 'semak()' nilai = 'Semak Semua' />< jenis input = 'butang' onclick = 'nyahSemak()' nilai = 'Nyahtanda Semua' />
Seterusnya, tentukan fungsi bernama ' semak() ” dan gunakan “ document.getElementsByName kaedah ' dengan nilai yang ditentukan ' nama ” atribut. Kemudian, ulangi ' untuk ” gelung di sepanjang semua nilai kotak semak yang dibincangkan dalam kaedah sebelumnya.
Selain itu, apabila butang yang berkaitan diklik, ' diperiksa harta ” akan menandakan semua kotak pilihan dan menetapkan keadaan yang ditandakan sebagai “ benar ”:
pemeriksaan fungsi ( ) {jadi kambing = dokumen. getElementsByName ( 'semak' ) ;
untuk ( di dalam = 0 ; i < dapatkan. panjang ; i ++ ) {
dapatkan [ i ] . diperiksa = benar ; }
}
Seterusnya, tentukan fungsi bernama ' nyahSemak() ”, dan tambahkan fungsi terbalik di dalamnya untuk menandakan sifat kotak yang ditandakan sebagai “ salah ”:
fungsi nyahSemak ( ) {jadi kambing = dokumen. getElementsByName ( 'semak' ) ;
untuk ( di dalam = 0 ; i < dapatkan. panjang ; i ++ ) {
dapatkan [ i ] . diperiksa = salah ; }
}
Ia dapat melihat dalam output bahawa butang tambahan berfungsi dengan sempurna:
Kami telah menyediakan kaedah paling mudah untuk menyemak dan menyahtanda semua kotak pilihan menggunakan JavaScript.
Kesimpulan
Untuk menandai dan menyahtanda semua kotak pilihan menggunakan JavaScript, gunakan ' document.getElementsByName() ' kaedah dengan ' Kotak semak ' untuk menambah kotak semak dan mengakses fungsi, yang akan menyebabkan kotak semak diperiksa atau menggunakan kaedah yang sama dengan ' Butang ” untuk memasukkan dua butang secara berasingan untuk menyemak dan menyahtanda semua nilai yang ditentukan. Tulisan ini menerangkan kaedah untuk menyemak dan menyahtanda semua kotak pilihan menggunakan JavaScript.