78

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?

0

11 Answers 11

139

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 recent jQuery

$('input[name=Choose]').prop('checked',false);

With old jQuery (<1.6)

$('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;

Demo for JavaScript

3
  • Actually, this is what David Andersson suggested. I guess I missed his comment before I posted.
    – NVRAM
    Mar 31, 2010 at 15:47
  • +1 Its really working NVRAM.. Thanks and i am choosing this as a my accepted answer. Thanks everyone for your valuable answers.
    – i2ijeya
    Apr 1, 2010 at 4:54
  • 12
    in jquery version above 1.6 use $('input[name=Choose]').prop('checked',false);
    – Irfan Y
    Jul 2, 2019 at 9:19
27

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

12

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
6
  • If i have one common id means, then how could i proceed?
    – i2ijeya
    Mar 31, 2010 at 15:19
  • 4
    You 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. Mar 31, 2010 at 15:19
  • 1
    @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"). Mar 31, 2010 at 15:27
  • 1
    While 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. Mar 31, 2010 at 15:31
  • As 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.
    – NVRAM
    Mar 31, 2010 at 15:48
5

An ES6 approach to clearing a group of radio buttons:

    Array.from( document.querySelectorAll('input[name="group-name"]:checked'), input => input.checked = false );
3

In my case this got the job done:

const chbx = document.getElementsByName("input_name");

for(let i=0; i < chbx.length; i++) {
    chbx[i].checked = false;
}
1
  • I'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 May 9, 2021 at 22:59
2

Wouldn't a better alternative be to just add a third button ("neither") that will give the same result as none selected?

4
  • I 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
    – Filini
    Mar 31, 2010 at 15:52
  • 1
    @Filini Windows forms programming has 3-state radio buttons, not sure why they can't be used for the Web. Apr 1, 2010 at 14:05
  • @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?
    – Filini
    Apr 3, 2010 at 17:14
  • @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).
    – Umesh
    Jun 10, 2016 at 3:49
0

Simple, no jQuery required:

<a href="javascript:clearChecks('group1')">clear</a>

<script type="text/javascript">
function clearChecks(radioName) {
    var radio = document.form1[radioName]
    for(x=0;x<radio.length;x++) {
        document.form1[radioName][x].checked = false
    }
}

</script>
0
YES<input type="radio" name="group1" id="sal" value="YES" >

NO<input type="radio" name="group1" id="sal1" value="NO" >

<input type="button" onclick="document.getElementById('sal').checked=false;document.getElementById('sal1').checked=false">
2
  • That won't actually work if NO is checked because javascript will never see the 2nd element with the same ID. Mar 31, 2010 at 15:28
  • -1. It's invalid HTML to have multiple elements with the same ID.
    – Josh
    Mar 31, 2010 at 15:47
0

if the id of the radio buttons are 'male' and 'female', value reset can be done by using jquery

$('input[id=male]').attr('checked',false);
$('input[id=female]').attr('checked',false);
0

Somtimes i have to remove attribute checked from inputs type="radio" :

let el = document.getElementById('your_input_id');
    el.checked = false;
    el.removeAttribute('checked');
-1

<form>
  <input type="radio" name="btn"> Item1
  <input type="radio" name="btn"> Item2<br>
  <input type="reset">
</form>

This could work..

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Ethan
    Aug 16, 2022 at 21:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.