Menggunakan Radio Button Selection Dengan Jquery

Halo teman-teman, berjumpa lagi dengan saya. Pada tutorial artikel kali ini kita akan belajar Menggunakan Radio Button Selection Dengan Jquery, fungsi ini dapat memilih list yang kita mau. Baik di bawah ini adalah demo yang nanti kita akan buat

Jika saya klik salah satu pilihan dari kategory baju maka akan tampil “Mohon pilih kedua kategory!”

Mengharuskan kita memilih kedua kategori dan akan di tampilkan keduanya

Oke saya klik kedua kategory maka akan tampil “Kamu Memilih – Lengan Panjang warna – Hitam”

Oke mari kita praktekkan persis seperti demo di atas ini, seperti biasa teman-teman siapkan text editornya dan copy script di bawah ini

<!DOCTYPE html>
<html>
<head>
<title>Radio Button Selection</title>
</head>
<body>
<form id="myform">
    <h1>Kategory Baju:</h1>
    <input type="radio" name="baju_options" value="Lengan Panjang" /> Lengan Panjang
    <input type="radio" name="baju_options" value="Lengan Pendek" /> Lengan Pendek
    <input type="radio" name="baju_options" value="Kaos" /> Kaos
    <input type="radio" name="baju_options" value="Kemeja" /> Kemeja
    <br><br><br>
    <h1>Kategory Warna:</h1>
    <input type="radio" name="color_site" value="Orange" /> Orange
    <input type="radio" name="color_site" value="Merah" /> Merah
    <input type="radio" name="color_site" value="Hitam" /> Hitam
    <input type="radio" name="color_site" value="Hijau" /> Hijau
    <br><br>
    <div><button id="radio_submit" type="button">Pilih</button></div>
</form>
</body>
</html>

Dan pastekan script di atas pada text editornya kemudian save dengan nama index.html, jika sudah. Buka pada browsernya, maka outputnya akan menghasilkan seperti gambar di bawah ini

Kemudian kita berikan fungsi Jquery nya, untuk menjalankan fungsi-fungsi sesuai yang kita mau. Jangan lupa teman-teman sertakan librari Jquery nya atau bisa juga copy link di bawah ini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Letakkan di dalam tag <head>, jika sudah ditambahkan kemudian kita berikan fungsi Jquerynya. Tambahkan script di bawah ini

<script type="text/javascript">
$(document).ready(function() {
    $("#radio_submit").click(function (e) {
        var checked_option_radio = $('input:radio[name=baju_options]:checked').val();
        var checked_site_radio = $('input:radio[name=color_site]:checked').val();
       
        if(checked_option_radio===undefined || checked_site_radio===undefined)
            {
                alert('Mohon pilih kedua kategory!');
            }else{
                alert('Kamu Memilih - ' +checked_option_radio + ' warna - '+ checked_site_radio +'');
            }
    });
});
</script>

Kemudian save dan refresh pada browsernya, maka Radio Button Selection Dengan Jquery sudah berhasil di buat dan di jalankan. Cukup mudah bukan, oke sekian dulu pada artikel kali ini tentang Menggunakan Radio Button Selection Dengan Jquery kita berjumpa lagi di lain kesempatan. Semoga bermanfaat dan Sampai jumpa

Baca juga artikel tentang Mengubah Posisi Pusat Gradients Pada CSS3

Menggunakan Radio Button Selection Dengan Jquery

Kategori