Menggunakan Radio Button Selection Dengan Jquery
Halo teman-teman, berjumpa lagi dengan saya. Di panduan artikel kali ini kita akan belajar Menggunakan Radio Button Selection Dengan Jquery, kegunaan ini dapat memilih list yang kita mau. Bagus di bawah ini yaitu demo yang nanti kita akan bikin
Sekiranya saya klik diantara alternatif dari kategory baju karenanya akan tampil “Mohon pilih kedua kategory!”
Mengharuskan kita memilih kedua kategori dan akan di tampilkan keduanya
Oke saya klik kedua kategory karenanya akan tampil “Kamu Memilih – Lengan Panjang warna – Hitam”
Oke mari kita praktekkan persis seperti demo di atas ini, seperti lazim 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 di text editornya kemudian save dengan nama index.html, seandainya telah. Buka di browsernya, karenanya outputnya akan menghasilkan seperti gambar di bawah ini
Kemudian kita berikan kegunaan Jquery nya, bagi menjalankan fungsi-fungsi sesuai yang kita mau. Jangan lupa teman-teman sertakan librari Jquery nya atau dapat pun copy link di bawah ini
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js></script>
Letakkan di pada tag <head>, seandainya telah ditambahkan kemudian kita berikan kegunaan 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 di browsernya, karenanya Radio Button Selection Dengan Jquery telah berhasil di bikin dan di jalankan. Lumayan gampang bukan, oke demikian dulu di artikel kali ini mengenai Menggunakan Radio Button Selection Dengan Jquery kita berjumpa lagi di lain kesempatan. Semoga bermanfaat dan Hingga jumpa
Baca pun artikel mengenai Mengubah Posisi Pusat Gradients Pada CSS3
Sumber https://kursuswebsite.org
