Hallo, Jumpa lagi dengan saya, pada tutorial kali ini saya akan bahas mengenai bagaimana Cara Mengambil Nilai Checkbox Dengan Jquery, tujuan nya adalah tidak lain dan tidak bukan supaya kita bisa mengambil atau mencetak nilai yang telah kita tentukan, baik langsung saja kita praktekan.
Pertama-tama tentu kita buat dulu sebuah bentuk inputan, disini saya menggunakan element Checkbox, seperti berikut.
<body> Pilih: <input type="checkbox" id="Apel" value="Buah Apel"> apel <input type="checkbox" id="Mangga" value="Buah Mangga"> Mangga <input type="checkbox" id="Jeruk" value="Buah Jeruk"> Jeruk <br><br> <button id="cetak">Cetak</button> </body>
Pada kode diatas saya sudah menentukan id masing-masing yaitu : Apel, Mangga, dan Jeruk. Kemudian selanjutnya kita akan buat proses nya dengan kode Jquery berikut.
<script>
$(document).ready(function() {
$("#cetak").click(function() {
var nilai1 = $("#Apel:checked").val();
var nilai2 = $("#Mangga:checked").val();
var nilai3 = $("#Jeruk:checked").val();
if (nilai1==undefined) {nilai1="";}
if (nilai2==undefined) {nilai2="";}
if (nilai3==undefined) {nilai3="";}
alert(nilai1 + " " + nilai2 + " " + nilai3);
})
});
</script>
Pada pengambilan ini saya menggunakan fungsi val(), yang berfungsi untuk memilih dan kemudian mencetak nilai yang kita pilih, diatas saya sudah deklasaikan bahwa untuk id yang nilai nya apel saya kasih variable nilai 1, begitupun buah yang lain nya telah saya sesuaikan, bisa dilihat di atas.
Selanjutnya, untuk menjalankan program diatas kalian harus load dulu library jquery berikut, pada kasus ini saya memakai cara online dan ketika kalian mau menjalankan program ini tentu kalian harus terkoneksi internet, tapi jangan khawatir buat kalian yang belum bisa konek internet kalian bisa membuat nya jadi offline, cara nya sangat mudah kalian buka kode berikut.
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
kemudian kalian simpan di folder, dibawah ini adalah cara online saya.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Oke, kalau sudah silahkan kalian jalankan dibrowser masing-masing, dan lihat hasilnya, tinggal kalian pilih dan kemudian cetak. Baik sampai disini tutorial mengenai Cara Mengambil Nilai Checkbox Dengan Jquery, semoga bermanfaat, amin.
Selamat mencoba 🙂