While working with forms, developers often need to capture specific inputs like gender or name prefix, and the radio button serves as the ideal choice for this. Users generally select one option from predefined values with radio buttons. For example, on a registration page, a user typically selects their gender through radio buttons.
Based on the user selected we need to perform some further operations like asking for different user inputs based on gender. Then we need to know which radio button is checked by a user and perform action based on that value.
In further examples, we will get the value of selected or checked radio button value using a selector in jQuery. We will also take some with class, name or id based on getting a value of the radio button.
To get a checked or selected radio button value, we nee to use the jQuery :checked selector with the val() method. The radio button group contains a common name for a particular group so we can not use the val() method directly.
Let’s take an example to understand how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Checked Radio Button Value</title>
</head>
<body>
<h4>Please select your gender.</h4>
<p>
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
</p>
<p><input type="button" value="Show Selected" id="getGeneder"></p>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('#getGeneder').click(function(){
var selectedValue = $("input[name='gender']:checked").val();
if(selectedValue){
alert("Slected gender is : "+selectedValue);
}else{
alert("Please check radio button first.");
}
});
});
</script>
</body>
</html>In the above example, we have created simple radio buttons for gender and added a button. Whenever the user clicks on that button we will show a message based on a value selected. If you have selected gender then we will show the selected gender other messages to select gender.
Here, we have defined our logic based on button click but we can also trigger on change event and get the selected radio button whenever it changes.
Let’s take another example to implement on change event and get a checked radio button value using jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Checked Radio Button Value</title>
</head>
<body>
<h4>Please select your gender.</h4>
<p>
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
</p>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
$('input:radio[name=gender]').change(function () {
var selectedValue = $('input:radio[name=gender]:checked').val();
if(selectedValue){
alert("Slected gender is : "+selectedValue);
}else{
alert("Please check radio button first.");
}
});
});
</script>
</body>
</html>In the above example, the user do not have to click a button to trigger an event. Whenever the user changes the radio button then it will check the selected value and print the message accordingly.
Conclusion
In this article, we demonstrated how to select or check value of the radio button using jQuery. In addition, we have attached on change event with radio selection.
When handling dynamic form data in JavaScript or jQuery, it’s often necessary to check if a value exists in an array or not before moving forward with logic. It can simply prevent errors and make your code more reliable. For a detailed guide, you can explore practical ways to handle this in jQuery.