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 🚀 🚀 🚀
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 66464 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 31938 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 30571 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28371 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 27622 views