Cara Mendapatkan Nilai dari Radio Button dengan JQuery

CoretanKode – Cara Mendapatkan Nilai dari Radio Button dengan JQuery, Selamat datang di blog sederhana milik admin seorang nih. Pada kesempatan kali ini admin akan membahas tentang bagaimana cara kita bisa mengambil nilai dari elemen radio button menggunakan library JQuery nih.

Artikel Menarik Lain-nya :

• Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly
• Cara Membuat Safelink Sendiri di Blog (Blogger/WP)
• Pengertian Case Sensitive: Contoh dan Cara Kerjanya
• 2 Cara Inspect Element di HP Google Chrome Android

Radio Button sendiri merupakan sebuah tag elemen yang sering digunakan untuk pemilihan satu data dari banyak data, memang mirip dengan tag elemen checkbox tetapi yang membedakan ialah pada Radio Button kalian hanya bisa memilih satu pilihan saja.

Sementara pada tag elemen CheckBox kalian bisa memilih lebih dari satu pilihan loh, Jadi simpel-nya Radio Button dapat kalian gunakan untuk meminta keputusan user setuju atau tidak dimana user hanya bisa memilih satu jawaban saja yakni setuju atau tidak saja.

Cara Mendapatkan Nilai dari Radio Button dengan JQuery

Nah setelah kita mengetahui secara singkat tentang apa sih radio button itu ? maka selanjutnya yang akan kita kerjakan adalah bagaimana cara kita membuat lalu mengambil nilai dari radio button tersebut. Pada kasus ini Admin akan mengambil data pada radio button lalu menampilkan-nya di function Alert JavaScript.

Berikut ini Cara Mendapatkan Nilai Radio Button dengan JQuery :

• Silahkan gunakan terlebih dahulu library JQuery-nya yah dengan cara menambahkan kode berikut ini di halaman HTML kalian :

<script src=”https://code.jquery.com/jquery-1.12.4.min.js”></script>

• Setelah itu silahkan kalian membuat sebuah form dimana terdapat pilihan menggunakan Radio Button yah sintaks-nya sekiranya seperti berikut ini :

<label><input type=”radio” name=”type” value=”coretan” />Coretan</label>
<label><input type=”radio” name=”type” value=”kode” />Kode</label>

• Setelah membuat form atau pilihan menggunakan Radio Button selanjutnya kalian tinggal membuat tombol untuk memulai memproses pilihan, untuk latihan silahkan kalian buat tombol sederhana seperti berikut ini :

<input type=”button” value=”Get Value” />

• Setelah tombol button telah dibuat maka selanjutnya kita akan menuliskan baris kode JQuery-nya seperti berikut ini :

<script>
$(document).ready(function () {
$(“input[type=’button’]”).click(function () {
var radioValue = $(“input[name=’type‘]:checked”).val();
if (radioValue) {
alert(“result: Anda Memilih ” + radioValue);
}
});
});
</script>

Penjelasan Source Code :

Nah jadi pada kode JQuery diatas kalian dapat melihat kita menggunakan sebuah function .click pada button yang kita buat di sebuah halaman HTML barusan, Dimana pada saat button diklik maka makan dibuatlah sebuah variabel dengan nama radioValue yang berisikan value dari tag yang bernama type lalu selanjutnya terdapat sebuahh fungsi perbadingan if.

Selanjutnya fungsi alert akan ditampilkan pada halaman HTML kalian setelah kalian memilih salah satu dari radio button tersebut. Pesan dari alert yang akan muncul adalah Anda Memilih +valueRadioButton sehingga kalian dapat melihat apakah data berhasil ditangkap atau tidak.

Nah jadi cukuplah sederhana bukan apabila kita ingin mengambil alias menangkap data dari sebuah elemen radio button saja. JQuery memang membuat pekerjaan dapat menjadi lebih mudah loh, Makanya belajar JQuery hanya di CoretanKode saja yah.

Sekian dulu dari admin untuk artikel mengenai Cara Mendapatkan Nilai dari Radio Button dengan JQuery kali ini semoga bermanfaat dan Terima kasih telah berkunjung, Assalamualaikum Warahmatullahi Wabarakatu.

Originally posted 2021-12-28 04:33:30.