Kali ini kita akan belajar cara mendapatkan nilai checkbox dengan javascript. Nilai dari komponen checkbox dapat kita ambil melalui bahasa pemrograman server-side seperti PHP, baca di Using the PHP checkbox. serta bahasa sisi klien seperti javascript
Dengan menggunakan checkbox kita bisa memilih lebih dari satu pilihan, sehingga nilai yang dikirim adalah multiple item. Berikut ini adalah contoh contoh program sederhana pengambilan nilai checkbox dengan javascript
<input type="checkbox" name="hobi" value="Membaca">Membaca <br> <input type="checkbox" name="hobi" value="Menulis">Menulis <br> <input type="checkbox" name="hobi" value="Menari">Menari <br> <input type="checkbox" name="hobi" value="Bernyanyi">Bernyanyi <br> <input type="checkbox" name="hobi" value="Olahraga">Olahraga <br> <button id="submit">Submit</button> <div id="tampil"></div> <script> var btn = document.getElementById("submit"); btn. title = function() { var checkbox = document.getElementsByName("hobi"); var hobi = ""; for(var i = 0; i < checkbox.length; i++){ if(checkbox[i].checked){ hobi = hobi + checkbox[i].value +", "; } } document.getElementById("tampil").innerText = hobi.replace(/,\s*$/, ""); } </script>Hasil Keluaran
Penjelasan singkat
Program diatas kita membuat 5 komponen checkbox dengan nama hobi, masing-masing checkbox memiliki nilai (value) yang berbeda. Kemudian terdapat juga button submit, pada button tersebut diberi atribut id dengan nilai submit. Nantinya ketika tombol ini diklik akan memicu event javascript dijalankan. Hasilnya akan ditampilkan pada elemen tag
Program JavaScript ditandai dengan sintaks dalam tag. tombol kirim adalah variabel btn yang diinisialisasi yang mengacu pada atribut id tombol. Kemudian ketika tombol diklik ( title) maka method akan dieksekusi, dimana variabel hobby diinisialisasi yang mengacu pada elemen dengan nama hobby. Kemudian perulangan for dilakukan dengan kode perulangan yang dilakukan kurang dari jumlah kotak centang yang dicentang. Lalu ada kondisi if untuk mencentang setiap checkbox, jika ada yang dicentang dengan status dicentang, maka nilainya akan diset di variabel hobby. nanti nilai hobby yang akan ditampilkan pada atribut id muncul
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Salah satu hal yang dapat dilakukan dengan Javascript adalah mengambil data dari form HTML dan menampilkannya kembali pada halaman web. Berikut adalah cara-cara yang dapat dilakukan untuk menampilkan data. Dimulai dari yang paling awal yaitu bentuk HTML
Buat formulir
Formulir ini digunakan sebagai sarana untuk menuliskan data-data yang diperlukan. Formulir dapat dibuat menggunakan elemen "input". Berikut adalah contoh penulisannya
Elemen input diberi atribut id agar dapat diakses dengan Javascript. Atribut id juga berfungsi untuk membedakan elemen masukan satu dengan lainnya
Misalnya pada contoh penulisan di atas, elemen pertama diberi id dengan nama “nama”, dan elemen kedua diberi nama “umur”. Elemen pertama dicadangkan sebagai tempat menuliskan nama, dan elemen kedua dicadangkan untuk usia
Atribut tipe juga penting dalam menulis elemen input. Hal ini untuk menentukan jenis input data. Misal pada input “nama”, tipe datanya harus text. Untuk input "usia", tipe datanya bisa berupa teks atau angka mengingat keduanya masih bisa menghasilkan angka untuk usia
Buat Tombol
Setelah input dibuat, selanjutnya adalah membuat tombol untuk memicu javascript untuk membaca data pada formulir HTML sekaligus untuk menampilkan kembali data tersebut.
Tombol dapat dibuat dengan elemen tombol atau elemen div biasa yang dilengkapi dengan atribut title. Atribut title digunakan untuk menjalankan fungsi tertentu saat tombol diklik
Berikut adalah contoh penulisan yang menggunakan elemen tombol
MENGIRIMElemen untuk ditampilkan
Bagian terakhir dari HTML adalah tempat data yang diperoleh kemudian ditampilkan. Tempat ini bisa dibuat menggunakan elemen apa saja. Pada contoh penulisan berikut, kita menggunakan elemen div
Agar elemen dapat diakses dengan javascript, atribut id dengan nama "tampilan" digunakan
Membuat Javascript Mengenali Elemen HTML
Setelah semua elemen tersedia di HTML, selanjutnya adalah membuat javascript dapat mengenali semua elemen di HTML. Elemen yang harus dikenali Javascript adalah elemen input dan elemen untuk ditampilkan
Untuk membaca data pada elemen HTML, pemilih "id" digunakan seperti pada contoh berikut
Dengan baris program di atas, Javascript telah mengenali input dan tampilan
Buat Fungsi untuk Ditampilkan
Fungsi ini bekerja ketika tombol yang digunakan untuk mengirim data ditekan
Berikut penulisan penulisan fungsi
Saat tombol ditekan, fungsi send() dijalankan. Fungsi ini mengumpulkan data dari elemen dengan id "nama" dan id "umur" dan kemudian menampilkannya pada elemen dengan id "tampilan". Data dari kedua elemen tersebut kemudian ditampilkan dipisahkan dengan koma ","