Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to uncheck a radio button using JavaScript/jQuery?
Sometimes, we require to uncheck a radio button using JavaScript or JQuery. For example, we use the radio button in the form. When the user presses the clear form button, we need to uncheck all radio buttons and allow again users to choose any option from the radio button.
In this tutorial, we will learn various methods to uncheck single or multiple radio buttons using JQuery or JavaScript.
Use the JavaScript to uncheck the radio button
We can access the radio button in JavaScript using id, tag, name or other ways. After that, we can uncheck the radio button's checked property by assigning the false boolean value.
Syntax
Users can follow the syntax below to uncheck the radio button using the checked property.
radio.checked = false;
In the above syntax, radio is a radio button accessed using JavaScript.
Example 1
In the example below, we have created the radio button. Users can check the radio button by clicking the radio button. After that, when the user clicks the button, it will invoke the clearRadio() function.
In the clearRadio() function, we access the radio input using its id. Next, we access the checked property of the radio input and assign a false boolean value to uncheck the radio button.
<html>
<body>
<h2> Using the <i> Checked property of radio button </i> to uncheck radio button in JavaScript. </h2>
<br>
<label for = "radio_btn"> Test </label>
<input type = "radio" id = "radio_btn" value = "test">
<br> <br>
<button onclick = "clearRadio()"> Uncheck Radio </button>
<br> <br>
<div id = "output"></div>
</body>
<script>
let output = document.getElementById("output");
function clearRadio() {
let radio = document.getElementById("radio_btn");
radio.checked = false;
}
</script>
</html>
In the above output, users can observe that it will clear the radio input whenever they press the ‘uncheck radio’ button.
Use the JQuery to uncheck the radio button
We can also use JQuery to clear the radio input. In JQuery, we can use the prop() method to set any property to the HTML element. The prop() method takes two values as a parameter: the property name and the property value.
Here, we will pass ‘checked’ as a property name and false as a property value to uncheck a particular radio button using JQuery.
Syntax
Users can follow the syntax below to use JQuery’s prop() method to uncheck the radio button.
$("#radio_btn").prop('checked', false);
In the above syntax, we passed the ‘checked’ property name as the first parameter and the false property value as a second parameter.
Example 2
In the example below, we have created a single radio button. When the click event triggers on the button, it will clear the radio button by setting up a false value for the checked property using the prop() method.
<html>
<head>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2> Using the <i> prop() method </i> to uncheck radio button in JQuery</h2>
<label for = "radio_btn"> Clear </label>
<input type = "radio" id = "radio_btn" value = "clear">
<br> <br>
<button id = "btn"> Uncheck Radio </button>
<br> <br>
<div id = "output"></div>
</body>
<script>
let output = document.getElementById("output");
// detect button click
$('#btn').click(function () {
// Clear radio button
$("#radio_btn").prop('checked', false);
})
</script>
</html>
Example 3
We have created multiple radio inputs in the example below and grouped them. So, users can select any radio input from all four. When a user clicks the button, it will clear all radio input.
Here, we have accessed the radio input by its type and name. So, even if users have selected any radio input from the group, it will uncheck it.
<html>
<head>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2> Using <i> jQuery </i> to clear multiple radio buttons </h2>
<label for = "color"> Blue </label>
<input type = "radio" id = "color" name = "color" value = "Blue">
<label for = "color"> Black </label>
<input type = "radio" id = "color" name = "color" value = "Black">
<label for = "color"> Brown </label>
<input type = "radio" id = "color" name = "color" value = "Brown">
<label for = "color"> Green </label>
<input type = "radio" id = "color" name = "color" value = "Green">
<br> <br>
<button id = "btn"> Clear all radio buttons </button>
<br> <br>
<div id = "output"></div>
</body>
<script>
let output = document.getElementById("output");
$('#btn').click(function () {
// clear all radio buttons
$("input[type=radio][name=color]").prop('checked', false);
output.innerHTML = "All radio buttons are unchecked!"
})
</script>
</html>
We learned to clear radio inputs when required using JavaScript and jQuery. Also, it is necessary to clear the radio input when a user submits the form. Users can access the group of radio button by their type and name and then clear all radios of a single group.
19K+ Views
To Continue Learning Please Login