Home »
jQuery »
jQuery Examples
How to check a radio button with jQuery?
In this tutorial, we'll discuss how can we check the given radio button using jQuery?
Submitted by Pratishtha Saxena, on August 25, 2022
Usually, when a radio button or a checkbox is given in a form, it is filled/selected by the user filling the form. But sometimes, we don't want the user to change the option selected. Hence, that particular option can be selected by jQuery from the programmer's end only.
Now, to select the radio button, there are different ways. Some of them are discussed below.
1) Check a radio button using prop() Method
It is a jQuery inbuilt method, which helps to set or get the properties of the selected element. Different properties can be checked through this and it will return the first matched element of it.
Syntax:
$('selector').prop('property','value');
By specifying property and value respectively, some new properties can be set using this. Therefore, we can specify the checked property true over here to set the radio button selected.
Example 1: Check a radio button using jQuery 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>Check Radio Button Using jQuery</h2>
<div>Below Form is for <b>Women Only</b></div>
<br><br>
<form id="myForm">
<label>Name: </label>
<input type="text"><br><br>
<label>Age: </label>
<input type="number"><br><br>
<label>Email Id: </label>
<input type="email"><br><br>
<label>Gender: </label>
<input type="radio" id="radio1">Female
<input type="radio" id="radio2">Male
<button type="button" id="button1">Select Female</button>
</form>
<br><br>
<button type="button">Submit</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#button1').click(function(){
$('#radio1').prop('checked','true');
})
});
</script>
</html>
Output:
The prop() method can also be used by replacing the 'true' keyword with the 'checked' keyword as its value. Both of them are correct. So, using 'checked' means to check whether the radio button is selected or not.
Syntax:
$('selector').prop('checked','checked');
2) Check a radio button using attr() Method
This is again an inbuilt method of jQuery. It helps to set and get the attribute of the selected element. The attribute and its property can be declared and it will help to set the attribute for the element. This is quite similar to the prop() method.
Syntax:
$('selector').attr('attribute','value');
Example 2: Check a radio button using jQuery attr() 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 Radio Button Using jQuery</h2>
<div>Below Form is for <b>Women Only</b></div>
<br><br>
<form id="myForm">
<label>Name: </label>
<input type="text"><br><br>
<label>Age: </label>
<input type="number"><br><br>
<label>Email Id: </label>
<input type="email"><br><br>
<label>Gender: </label>
<input type="radio" id="radio1">Female
<input type="radio" id="radio2">Male
<button type="button" id="button1">Select Female</button>
</form>
<br><br>
<button type="button">Submit</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#button1').click(function(){
$('#radio1').attr('checked','true');
})
});
</script>
</html>
Output:
References