Kotak centang adalah kotak pilihan yang memungkinkan pengguna membuat pilihan biner (benar atau salah) dengan mencentang dan tidak mencentangnya. Pada dasarnya, kotak centang adalah ikon yang sering digunakan dalam bentuk dan aplikasi GUI untuk mendapatkan satu atau lebih masukan dari pengguna.
- Jika kotak centang ditandai atau dicentang, itu menunjukkan benar;
- Jika kotak centang tidak dicentang atau tidak dicentang, itu diindikasikan salah;
Ingatlah bahwa kotak centang berbeda dari tombol radio dan daftar dropdown karena memungkinkan beberapa pilihan sekaligus. Sebaliknya, tombol radio dan dropdown memungkinkan kita memilih hanya satu dari opsi yang diberikan
Dalam bab ini, sekarang kita akan melihat cara mendapatkan semua nilai kotak centang yang ditandai menggunakan JavaScript
Buat sintaks kotak centang
Untuk membuat kotak centang gunakan tab HTML dan ketik = "kotak centang" di dalam tab seperti yang ditunjukkan di bawah ini -
Walaupun Anda juga bisa membuat checkbox dengan membuat objek checkbox melalui JavaScript, namun cara ini agak sedikit rumit. Kami akan membahas kedua pendekatan nanti-
Contoh
Buat dan dapatkan nilai kotak centang
Dalam contoh ini, kami akan membuat dua kotak centang tetapi dengan syarat bahwa pengguna harus menandai hanya satu kotak centang di antaranya. Kemudian kami akan mengambil nilai dari kotak centang yang ditandai. Lihat kode di bawah ini
Salin Kode
Uji SekarangKeluaran
Jika Anda mencentang kotak Ya dan kemudian mengklik tombol Kirim, pesan akan ditampilkan seperti yang ditunjukkan di bawah ini
Jika Anda mengklik tombol Kirim tanpa menandai salah satu kotak centang, pesan kesalahan akan ditampilkan
Demikian pula, Anda dapat memeriksa keluaran untuk kondisi lain
Dapatkan semua nilai kotak centang
Sekarang, Anda akan melihat cara mendapatkan semua nilai kotak centang yang ditandai oleh pengguna. Lihat contoh di bawah ini
Salin Kode
Uji SekarangKeluaran
Dengan mengeksekusi kode ini, kita akan mendapatkan respon seperti screenshot di bawah ini yang memiliki beberapa bahasa pemrograman dimana Anda dapat memilih bahasa yang Anda tahu
Di sini, Anda mengklik tombol Periksa semua, itu akan menandai semua kotak centang bahasa pemrograman. Setelah itu, klik tombol Submit untuk mendapatkan respon
Meskipun Anda dapat memilih bahasa satu per satu dengan menandai satu per satu kotak centang dan kemudian klik tombol Kirim untuk mendapatkan hasilnya
Keluaran. Ketika Anda belum memilih apa pun
Dapatkan semua nilai kotak centang yang ditandai menggunakan metode querySelectorAll()
Ada satu metode lagi untuk mendapatkan semua nilai yang dipilih dari kotak centang yang ditandai oleh pengguna. Sekarang Anda akan melihat cara mendapatkan nilai semua kotak centang menggunakan metode querySelectorAll() yang ditandai oleh pengguna. Ini akan mengambil nilai kotak centang dari formulir HTML dan menampilkan hasilnya
Dapatkan semua nilai kotak centang
Sekarang, Anda akan melihat cara mendapatkan semua nilai kotak centang yang ditandai oleh pengguna. Lihat contoh di bawah ini
Salin Kode
Uji SekarangKeluaran
Di sini, Anda dapat melihat bahwa semua nilai kotak centang yang ditandai telah dikembalikan
Kode JavaScript yang berbeda untuk mendapatkan nilai kotak centang yang ditandai
Kode JavaScript untuk mendapatkan semua nilai kotak centang yang dicentang
Anda juga dapat menggunakan kode di bawah ini untuk mendapatkan semua nilai kotak centang yang dicentang
Jadi, elemen kotak centang memungkinkan untuk memilih banyak. Ini berarti bahwa pengguna dapat memilih satu atau lebih opsi pilihan mereka yang ditentukan dalam formulir HTML. Bahkan Anda dapat memilih semua kotak centang. Dalam contoh di atas, Anda telah melihatnya
Apakah Anda ingin menghitung pilihan kotak centang di dalam formulir Anda? . Dalam tutorial ini, kami akan memandu Anda melalui setiap langkah tentang cara mencapainya
Membuat formulir
Pertama, Anda harus membuat formulir baru dan menambahkan bidang Kotak Centang ke formulir. Jika Anda memerlukan bantuan dalam membuat formulir, tinjau dokumentasi ini
Menambahkan bidang untuk menahan jumlah pilihan kotak centang Anda
Sekarang kami akan menambahkan bidang ke formulir Anda yang akan berisi hitungan saat pilihan dibuat
Kami akan menambahkan bidang formulir Teks Baris Tunggal yang akan menyimpan hitungan dalam formulir Anda
Menambahkan cuplikan ke situs Anda
Sekarang saatnya menambahkan cuplikan ke situs Anda yang akan memperbarui hitungan saat pilihan dicentang dan tidak dicentang
Jika Anda memerlukan bantuan untuk menambahkan cuplikan ke situs Anda, silakan lihat tutorial ini
/* * Count checkbox selections * * @link //wpforms.com/developers/wpforms_frontend_output_success/ */ function wpf_dev_checkbox_count() { ?> <script type="text/javascript"> (function($) { //Count the checkbox selections on field ID 25 for the form ID 374 var $checkboxes = $( '#wpforms-374-field_25 input[type="checkbox"]' ); $checkboxes.change(function(){ var countCheckedCheckboxes = $checkboxes.filter(':checked').length; //Add the count to the field ID 27 for the form ID 374 $( '#wpforms-374-field_27' ).val(countCheckedCheckboxes); }); })(jQuery); </script> <?php } add_action( 'wpforms_wp_footer_end', 'wpf_dev_checkbox_count', 10 );Cuplikan ini harus memiliki ID formulir 374 agar cocok dengan ID formulir yang Anda gunakan untuk menjalankan cuplikan ini
Juga di cuplikan, Anda akan melihat bidang_25 dan bidang_27 yang merupakan ID bidang yang bidang Kotak Centang dan Teks Baris Tunggal dari formulir
Jika Anda memerlukan bantuan untuk menemukan formulir dan ID bidang Anda, harap tinjau tutorial ini
Setelah mengikuti semua langkah ini, saat pengunjung Anda mencentang pilihan kotak centang, penghitungan akan diperbarui secara dinamis di bidang
Dan hanya itu yang Anda butuhkan. Apakah Anda ingin menggunakan Tag Cerdas untuk label kotak centang Anda?