
Mendapatkan Nilai Berdasarkan Radio Button Yang Dipilih Menggunakan jQuery

Terkadang kita perlu menggunakan radio button untuk membuat opsi input di program yang kita buat, seperti pilihan gender. Nah, untuk bisa mendapatkan nilai berdasarkan radio button yang dipilih ada beberapa opsi, salah satunya yaitu dengan menggunakan jQuery.
Dengan jQuery, untuk mendapatkan nilai radio button yang dipilih, kita cukup menggunakan jQuery :checked selector. Saya akan memberikan 3 contoh bagaimana cara mendapatkan dan menampilkan nilai dari radio button yang dipilih.
Contoh 1
<!DOCTYPE html>
<html>
<head>
<title>How to Get Value of Selected Radio Button Using jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.select {
color: #fff;
padding: 30px;
margin-top: 30px;
width: 100%;
}
label {
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1>Codelapan</h1>
<p>How to Get Value of Selected Radio Button Using jQuery</p>
<div>
<label><input type="radio" name="type" value="single" />Single</label>
<label><input type="radio" name="type" value="team" />Team</label>
</div>
<p><input type="button" value="Get Value" /></p>
<script>
$(document).ready(function () {
$("input[type='button']").click(function () {
var radioValue = $("input[name='type']:checked").val();
if (radioValue) {
alert("result: you choose " + radioValue);
}
});
});
</script>
</center>
</body>
</html>
Contoh 2
<!DOCTYPE html>
<html>
<head>
<title>How to Get Value of Selected Radio Button Using jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.select {
color: #fff;
padding: 30px;
margin-top: 30px;
width: 100%;
}
label {
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1>Codelapan</h1>
<p>How to Get Value of Selected Radio Button Using jQuery</p>
<div>
<label><input type="radio" name="type" class="type" value="single" />Single</label>
<label><input type="radio" name="type" class="type" value="team" />Team</label>
</div>
<p><input type="button" value="Get Value" /></p>
<script>
$(document).ready(function () {
$("input[type='button']").click(function () {
var radioValue = $(".type:checked").val();
if (radioValue) {
alert("result: you choose " + radioValue);
}
});
});
</script>
</center>
</body>
</html>
Contoh 3
<!DOCTYPE html>
<html>
<head>
<title>How to Get Value of Selected Radio Button Using jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.select {
color: #fff;
padding: 30px;
margin-top: 30px;
width: 100%;
}
label {
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1>Codelapan</h1>
<p>How to Get Value of Selected Radio Button Using jQuery</p>
<div>
<label><input type="radio" name="type" class="type" value="single" />Single</label>
<label><input type="radio" name="type" class="type" value="team" />Team</label>
</div>
<script>
$(document).ready(function () {
$(".type").change(function () {
var radioValue = $(".type:checked").val();
if (radioValue) {
alert("result: you choose " + radioValue);
}
});
});
</script>
</center>
</body>
</html>
Selamat mencoba dan saya harap artikel ini bisa membantu kamu. Sampai jumpa di artikel berikutnya 🚀 🚀 🚀
- Navbar on Scroll, Membuat Animasi Navbar Saat Scroll Up & Scroll Down
- Cara Membuat Autocomplete Input dengan HTML
- Menampilkan Peringatan Sebelum Meninggalkan Halaman Web Menggunakan JavaScript
- Show and Hide DIV berdasarkan Radio Button yang Dipilih Menggunakan jQuery
- Cara Membuat Copy to Clipboard dengan Javascript
- Tutorial Lengkap Belajar JavaScript Untuk Pemula
- Cara Membuat Show and Hide Password dengan jQuery
- Mengenal Apa itu DOM API pada Javascript
- Cara Instal VS Code di Linux yang Perlu Anda Ketahui
- Belajar Javascript: Mengenal Variabel dan Tipe Data pada Javascript
Windows | Linux | Mac |
---|---|---|
Ctrl + D | Ctrl + D | ⌘ + D |
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 56582 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 29365 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 27064 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 24669 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 21729 views