To get or selected radio checked button value using jQuery. In this jquery tutorial, we will learn how to get selected or checked the radio button value.
We can use the selector and val() method by jQuery Api and get the value of selected or radio input or button value.
We will use jQuery api method :checked selector for get or selected radio values. So you need to know that about jQuery api :checked selector
:checked selector Method By jQuery
Using the jQuery Api :checked selector method to get or return the value of selected HTML element.
$(“:checked”) Method Syntax
$(":checked");
How to get radio button value in jquery by id
Answer: You can use like below to get radio button value in jquery by id.
var rVal = $("#id:checked ").val();
How to get radio button value in jquery by name
Answer: You can use like below to get radio button value in jquery by name.
$("input[name='name']:checked").val();
How to get radio button value in jquery by Class
Answer: You can use like below to get radio button value in jquery by class.
var rVal = $(".classname:checked ").val();
By Example jQuery $(“:checked”) method
This example will demostrate you how use jquery :checked selector method to selected html elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Checked Radio Button Value</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn-get").click(function(){
var rVal = $(".rbtn:checked").val();
if(rVal){
alert("Your are a - " + rVal);
}
});
});
</script>
<style>
.ctrCls{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="ctrCls">
<h4>Please select your gender.</h4>
<p>
<label><input type="radio" name="gender" value="male" class="rbtn">Male</label>
<label><input type="radio" name="gender" value="female" class="rbtn">Female</label>
</p>
<p><input type="button" value="Get Value" id="btn-get"></p>
</div>
</body>
</html>
Output
Please select your gender.
