How to Get Value of Selected Radio Button Using jQuery
Sometimes we need to use radio buttons to make input options in our programs, such as gender choices. Well, to be able to get a value based on the selected radio button, there are several options, one of which is using jQuery.
With jQuery, to get the value of the selected radio button, we simply use the jQuery :checked selector. I will give 3 examples of how to get and display the value of the selected radio button.
Example 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>
Example 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>
Example 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>
Good luck and I hope this article can be useful. See you in the next article 🚀 🚀 🚀
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 66851 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 32132 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 31338 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28485 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 27761 views