Home »
jQuery »
jQuery Examples
Check whether a radio button is checked with jQuery?
Given radio buttons, we have to check whether a particular radio button has been selected or not using jQuery.
Submitted by Pratishtha Saxena, on September 17, 2022
Prerequisite: Adding jQuery to Your Web Pages
Radio buttons are the type of input tag. These types are generally used when amongst the various options one option has to be selected. Hence, using radio buttons is necessary while building a form that consists of the fields like – gender, current standard, etc.
Similarly, it is equally important to know at the backend which of the radio button has been selected by the user. There are times when an event or function has to be fired only when a particular option has been selected. So, to do this, we need to know how to check whether the option has been selected or not using jQuery.
For this, there are various ways. Here, we are going to discuss some of the following:
1) Check whether a radio button is checked using .length property
This property when used for a selector, helps to return the number of elements of that object. Generally, we can also use this as a way to check whether the selected object contains anything, i.e., any element or content inside it. Here, we are going to use this similarly.
Syntax:
$(selector).length
Using :checked selector along with this will help us to know whether the radio button is checked or not. It returns true if it is checked and false otherwise. Hence, using :checked selector along with the .length property in jQuery will help to know whether the specified radio button is checked or not.
Let's see the following example.
jQuery example to check whether a radio button is checked using .length property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>Check Whether Particular Radio Button is Checked Or Not Using jQuery</h2>
<p>Click the button to know whether the specified radio button is selected.</p>
<button>Is Hour Selected</button>
<hr>
<h4>TIME:</h4>
<input type="radio" name="time" value="hour" id="radio1" />Hour
<input type="radio" name="time" value="min" id="radio2" />Minute
<input type="radio" name="time" value="sec" id="radio3" />Second
<hr/>
<h3></h3>
</body>
<script type="text/javascript">
//Method 1
$(document).ready(function () {
$('button').on('click', function () {
if ($('#radio1:checked').length) {
$('h3').html('Yes! Hour is Selected.');
} else {
$('h3').html('NO! Hour is NOT Selected.');
}
})
});
</script>
</html>
Output:
2) Check whether a radio button is checked using .prop() method
This is one of the most important methods in jQuery. It is of great use many times. This method helps to set or return the property and the values of the selected element. Here, we'll be using the checked property of this method. This will check whether the selected element has any of its properties as checked. If yes, then it will return true, otherwise false for other conditions.
Syntax:
$(selector).prop('checked');
jQuery example to check whether a radio button is checked using .prop() method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>Make a Button Not Submit The Form Using jQuery</h2>
<p>The below given button will not submit the following form.</p>
<hr>
<h4>FORM</h4>
<label>Name: </label><input type="text"><br><br>
<label>Age: </label><input type="number"><br><br>
<label>Gender: </label><input type="radio">Male <input type="radio">Female<br><br>
<button type="submit">Submit</button>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('button[type!=submit]').on('click', function() {
return false;
});
});
</script>
</html>
Output:
3) Check whether a radio button is checked using .is() method
This again is a very useful method in jQuery. This basically helps to check whether the selected element matched the specified property. Since we need to check the checked property, hence, we will specify the :checked selector for it. If it returns true for it, then the radio button is selected, otherwise not.
Syntax:
$('selector').is(':checked');
jQuery example to check whether a radio button is checked using .is() method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>Check Whether Particular Radio Button is Checked Or Not Using jQuery</h2>
<p>Click the button to know whether the specified radio button is selected.</p>
<button>Is Hour Selected</button>
<hr>
<h4>TIME:</h4>
<input type="radio" name="time" value="hour" id="radio1" />Hour
<input type="radio" name="time" value="min" id="radio2" />Minute
<input type="radio" name="time" value="sec" id="radio3" />Second
<hr/>
<h3></h3>
</body>
<script type="text/javascript">
//Method 3
$(document).ready(function () {
$('button').on('click', function () {
if ($('#radio1').is(':checked')) {
$('h3').html('Yes! Hour is Selected.');
} else {
$('h3').html('NO! Hour is NOT Selected.');
}
})
});
</script>
</html>
Output:
