Home »
jQuery »
jQuery Examples
How to uncheck a radio button using JavaScript and jQuery?
Learn how to uncheck a given radio button with the help of JavaScript and jQuery?
Submitted by Pratishtha Saxena, on February 09, 2023
Radio buttons are required whenever one option has to be chosen from the given many options. In daily life, we do see them in forms where we need to fill in the gender. Now, over here we are discussing how can we uncheck a radio button either by using JavaScript or jQuery.
Uncheck a radio button using JavaScript
While using JavaScript for this task, we will be using the .checked property. As it suggests itself, the checked property is used to check whether the selected radio button/checkbox is checked or not. If it is checked then the value is set to 'true' otherwise 'false'.
Syntax:
document.getElementById('...').checked = true/false;
Hence, here we want our radio button to be unchecked. This implies that the .checked property has to be set to 'false'. Once this property is set, the result will be visible to the user on the webpage.
JavaScript example to uncheck a radio button
<!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.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>How to uncheck a radio button?</h2>
<h4>Click the button to uncheck the following radio button using JavaScript.</h4>
<button onclick="uncheckRadio()">Uncheck</button>
<hr>
Select a Day: <br><br>
<input type="radio" id="1" checked>Monday<br>
<input type="radio">Tuesday<br>
<input type="radio">Wednesday<br>
<input type="radio">Thursday<br>
<input type="radio">Friday<br>
<input type="radio">Saturday<br>
<input type="radio">Sunday
<hr>
<h4 id="one">Status - </h4>
</body>
<script type="text/javascript">
function uncheckRadio(){
var radio = document.getElementById('1');
radio.checked = false;
document.getElementById('one').innerHTML = 'Status - Unchecked';
}
</script>
</html>
Output:
Uncheck a radio button using jQuery
Now, if we want to consider jQuery for the same purpose, then similar to JavaScript, the checked property will be applicable for the same. But over here, we will be defining this property within the prop() method of jQuery.
The prop() method helps to set or return the property of the selected element. When the property has to be returned, then the name of the property (attribute) is defined. When the property has to be set, then along with the property name, property value is also to be given.
When the checked property is set to false, the selected radio button/checkbox is unchecked as we discussed above.
Syntax:
$('selector').prop('checked',false);
jQuery example to uncheck a radio button
<!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.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>How to uncheck a radio button?</h2>
<h4>Click the button to uncheck the following radio button using jQuery.</h4>
<button onclick="uncheckRadio()">Uncheck</button>
<hr>
Select a Day: <br><br>
<input type="radio" id="1" checked>Monday<br>
<input type="radio">Tuesday<br>
<input type="radio">Wednesday<br>
<input type="radio">Thursday<br>
<input type="radio">Friday<br>
<input type="radio">Saturday<br>
<input type="radio">Sunday
<hr>
<h4 id="one">Status - </h4>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('input#1').prop('checked',false);
$('h4#one').html('Status - Unchecked');
});
});
</script>
</html>
Output:
