How to clear radio button in Javascript?
Solution 1
You don't need to have unique id
for the elements, you can access them by their name
attribute:
If you're using name="Choose"
, then:
-
With jQuery it is as simple as:
$('input[name=Choose]').attr('checked',false);
-
or in pure JavaScript:
var ele = document.getElementsByName("Choose"); for(var i=0;i<ele.length;i++) ele[i].checked = false;
Solution 2
If you do not intend to use jQuery, you can use simple javascript like this
document.querySelector('input[name="Choose"]:checked').checked = false;
Only benefit with this is you don't have to use loops for two radio buttons
Solution 3
This should work. Make sure each button has a unique ID. (Replace Choose_Yes and Choose_No with the IDs of your two radio buttons)
document.getElementById("Choose_Yes").checked = false;
document.getElementById("Choose_No").checked = false;
An example of how the radio buttons should be named:
<input type="radio" name="Choose" id="Choose_Yes" value="1" /> Yes
<input type="radio" name="Choose" id="Choose_No" value="2" /> No
Solution 4
An ES6 approach to clearing a group of radio buttons:
Array.from( document.querySelectorAll('input[name="group-name"]:checked'), input => input.checked = false );
Solution 5
Wouldn't a better alternative be to just add a third button ("neither") that will give the same result as none selected?
i2ijeya
Updated on September 22, 2021Comments
-
i2ijeya over 2 years
I have a radio button named "Choose" with the options yes and no. If I select any one of the options and click the button labeled "clear", I need to clear the selected option, using javascript. How can I accomplish that?
-
i2ijeya about 14 yearsIf i have one common id means, then how could i proceed?
-
Shawn Steward about 14 yearsYou need to change it to separate IDs. You should not have more than one of the same ID on a page. You need to use the same Name to make it a radio button group, but the ID has to be unique.
-
David Andersson about 14 years@i2ijeya I would use a library such as jquery.com where I could select by class if I wanted to select more radio buttons at once. You could also use document.getElementsByName("Choose").
-
Shawn Steward about 14 yearsThat won't actually work if NO is checked because javascript will never see the 2nd element with the same ID.
-
Shawn Steward about 14 yearsWhile jQuery is great, it does not need to be used for every little bit of JavaScript. In this case it would just be unnecessary overhead for something that's pretty simple to do in plain JavaScript.
-
Josh about 14 years-1. It's invalid HTML to have multiple elements with the same ID.
-
NVRAM about 14 yearsActually, this is what David Andersson suggested. I guess I missed his comment before I posted.
-
NVRAM about 14 yearsAs David says, you can access by name, so id isn't required for this function. Also, I suspect a typo -- your value is the same for both buttons.
-
Filini about 14 yearsI quote this solution. Radio buttons, as a UI element, are not meant to be reset (ie: none of them checked). They are designed to start with 1 option checked, and the possibility to change it. You may consider to change your radio buttons to a dropdown list: {empty}|Yes|No
-
i2ijeya about 14 years+1 Its really working NVRAM.. Thanks and i am choosing this as a my accepted answer. Thanks everyone for your valuable answers.
-
Shawn Steward about 14 years@Filini Windows forms programming has 3-state radio buttons, not sure why they can't be used for the Web.
-
Filini about 14 years@Shawn, are you sure you are not thinking about tri-state checkboxes? Anyway, how does this relate to the possibility to reset a radio button?
-
Umesh almost 8 years@Filini - sometimes you might need to reset the radio buttons, all unchecked. I faced situation in a Quiz App - when user restarts the quiz, all the options (radio buttons) should be unchecked (created in AngularJS).
-
Irfan Yusanif almost 5 yearsin jquery version above 1.6 use $('input[name=Choose]').prop('checked',false);
-
mahi_0707 over 4 yearsEven when we have same
id
it is possible to clear selection. See my answer below -
Manny Alvarado almost 3 yearsI'm having an issue with this js code. When you reset a radio groud, whenever I select the same value again, I get an undefined