How to reset radiobuttons in jQuery so that none is checked

Question

I have radio buttons in HTML like this:

<td>
    <input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
    <input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
    <input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
    <input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
</td>

This is in a form tag, and when user submits a form I want to make all the radio buttons back to the default. Meaning none of them checked.

I have this code but it gives an error saying [0] is null or not an object

$('input[@name="correctAnswer"]')[0].checked = false;
$('input[@name="correctAnswer"]')[1].checked = false;
$('input[@name="correctAnswer"]')[2].checked = false;
$('input[@name="correctAnswer"]')[3].checked = false;

I am doing this in IE 6.

If @lambacck's answer doesn't work for you see the bug tracker on the JQuery site [http://bugs.jquery.com/ticket/10910]. If you are (as I was...)looping through a set of radio buttons to attempt reset them all to a default values, the `#(selector).prop('checked',true);` fails when it followed by attempting to set a subsequent radio button in the same group to an unchecked status. The trick is to _only set the radio button to a checked state and let the radio button group do what it does (uncheck the others...)_. Also, calling `$(selector).click();` works, and will fire any associate events. — Cos Callis, Jan 29 '12 at 21:20

score 289 · Accepted Answer · edited Jun 20 '20 at 09:12

In versions of jQuery before 1.6 use:

$('input[name="correctAnswer"]').attr('checked', false);

In versions of jQuery after 1.6 you should use:

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

but if you are using 1.6.1+ you can use the first form (see note 2 below).

Note 1: it is important that the second argument be false and not "false" since "false" is not a falsy value. i.e.

if ("false") {
    alert("Truthy value. You will see an alert");
}

Note 2: As of jQuery 1.6.0, there are now two similar methods, .attr and .prop that do two related but slightly different things. If in this particular case, the advice provide above works if you use 1.6.1+. The above will not work with 1.6.0, if you are using 1.6.0, you should upgrade. If you want the details, keep reading.

Details: When working with straight HTML DOM elements, there are properties attached to the DOM element (checked, type, value, etc) which provide an interface to the running state of the HTML page. There is also the .getAttribute/.setAttribute interface which provides access to the HTML Attribute values as provided in the HTML. Before 1.6 jQuery blurred the distinction by providing one method, .attr, to access both types of values. jQuery 1.6+ provides two methods, .attr and .prop to get distinguish between these situations.

.prop allows you to set a property on a DOM element, while .attr allows you to set an HTML attribute value. If you are working with plain DOM and set the checked property, elem.checked, to true or false you change the running value (what the user sees) and the value returned tracks the on page state. elem.getAttribute('checked') however only returns the initial state (and returns 'checked' or undefined depending on the initial state from the HTML). In 1.6.1+ using .attr('checked', false) does both elem.removeAttribute('checked') and elem.checked = false since the change caused a lot of backwards compatibility issues and it can't really tell if you wanted to set the HTML attribute or the DOM property. See more information in the documentation for .prop.

It is important to pass false rather than "false" for the second argument. — Casebash, Jun 09 '10 at 06:56
The "false" for the second argument is important because the second argument is the value to set. If the second argument is empty, it means give me the value of the first element that matches the selector. — lambacck, Jul 21 '10 at 00:55
@Noldorin - "Truthy" is a perfectly cromulent word. (Can you suggest a better way of expressing the concept of "truthy" - using only one word?) — nnnnnn, Mar 06 '12 at 12:21
Heh, fair enough perhaps. We all probably get the point, although I personally would have preferred the more formal "truthful" or "semantically truthful" even. — Noldorin, Mar 07 '12 at 00:29
@Noldorin "Truthy" and "falsy" are the terms many Javascript experts use, including [Brendan Eich](http://brendaneich.com/2008/08/tracemonkey-javascript-lightspeed/) and [Douglass Crockford](http://javascript.crockford.com/style2.html). The key term is falsy since [boolean evaluations are defined by the 6 falsy values](http://www.sitepoint.com/javascript-truthy-falsy/). Truthy is the logical name for the opposite of falsy. I think the use of falsy was purposely used to make you think that this may not be what you are used to (esp if coming from other C style syntax languages where 0 is false). — lambacck, Mar 15 '12 at 14:52
Ah okay. Javascript experts coined it... now I can happily ignore such nonsense. :-) — Noldorin, Mar 15 '12 at 17:58
@Casebash - Equally important is passing `"checked"` and not `checked`. — ArtOfWarfare, Sep 04 '13 at 15:40

score 53 · Answer 2 · edited Jul 13 '12 at 15:31

The best way to set radiobuttons state in jquery:

HTML:

<input type="radio" name="color" value="orange" /> Orange 
<input type="radio" name="color" value="pink" /> Pink 
<input type="radio" name="color" value="black" /> Black
<input type="radio" name="color" value="pinkish purple" /> Pinkish Purple

Jquery (1.4+) code to pre-select one button :

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").attr("checked","checked");

In Jquery 1.6+ code the .prop() method is preferred :

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").prop("checked",true);

To unselect the buttons :

$("[name=color]").removeAttr("checked");

score 10 · Answer 3 · answered Jun 10 '09 at 17:52

10

Your problem is that the attribute selector doesn't start with a @.

Try this:

$('input[name="correctAnswer"]').attr('checked', false);

answered Jun 10 '09 at 17:52

bdukes

152,002
23
148
175

score 4 · Answer 4 · answered Apr 20 '11 at 13:05

4

$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');

Or

$('input[name="correctAnswer"]').removeAttr('checked');

answered Apr 20 '11 at 13:05

Waqas Ali Khan

1,317
13
14

score 4 · Answer 5 · answered Sep 30 '11 at 12:37

Finally after a lot of tests, I think the most convenient and efficient way to preset is:

var presetValue = "black";
$("input[name=correctAnswer]").filter("[value=" + presetValue + "]").prop("checked",true);
$("input[name=correctAnswer]").button( "refresh" );//JQuery UI only

The refresh is required with the JQueryUI object.

Retrieving the value is easy :

alert($('input[name=correctAnswer]:checked').val())

Tested with JQuery 1.6.1, JQuery UI 1.8.

score 2 · Answer 6 · answered Apr 29 '16 at 00:07

I know this is old and that this is a little off topic, but supposing you wanted to uncheck only specific radio buttons in a collection:

$("#go").click(function(){
    $("input[name='correctAnswer']").each(function(){
      if($(this).val() !== "1"){
        $(this).prop("checked",false);
      }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">

And if you are dealing with a radiobutton list, you can use the :checked selector to get just the one you want.

$("#go").click(function(){
  $("input[name='correctAnswer']:checked").prop("checked",false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">

score 2 · Answer 7 · answered Jan 31 '19 at 06:27

2

Although prop changed the checked status but change also show that in the form.

$('input[name="correctAnswer"]').prop('checked', false).change();

answered Jan 31 '19 at 06:27

Adeel Raza Azeemi

571
5
16

score 0 · Answer 8 · answered Aug 12 '13 at 22:19

0

If you want to clear all radio buttons in the DOM:

$('input[type=radio]').prop('checked',false);

answered Aug 12 '13 at 22:19

elzaer

729
7
25

score 0 · Answer 9 · answered Sep 20 '13 at 12:52

<div id="radio">
<input type="radio" id="radio1" name="radio"/><label for="radio1">Bar Chart</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Pie Chart</label>
<input type="radio" id="radio3" name="radio"/><label for="radio3">Datapoint Chart</label>
</div>

$('#radio input').removeAttr('checked');
// Refresh the jQuery UI buttonset.                  
$( "#radio" ).buttonset('refresh');

score 0 · Answer 10 · edited Feb 24 '10 at 00:47

0

Radio button set checked through jquery:

<div id="somediv" >
 <input type="radio" name="enddate" value="1"  />
 <input type="radio" name="enddate" value="2"  />
 <input type="radio" name="enddate" value="3"  />
</div>

jquery code:

$('div#somediv input:radio:nth(0)').attr("checked","checked");

edited Feb 24 '10 at 00:47

sth

222,467
53
283
367

answered Feb 23 '10 at 22:36

sonali

1

score -1 · Answer 11 · edited May 12 '15 at 13:50

-1

Where you have: <input type="radio" name="enddate" value="1" />

After value= "1" you can also just add unchecked =" false" />

The line will then be:

<input type="radio" name="enddate" value="1" unchecked =" false" />

edited May 12 '15 at 13:50

Martijn Pieters

1,048,767
296
4,058
3,343

answered Nov 06 '12 at 18:34

Okee Dokee

1

1

Hey I think you left your answer incomplete. – Amar Nov 06 '12 at 18:53

score -2 · Answer 12 · edited May 12 '15 at 13:38

-2

Set all radio buttons back to the default:

$("input[name='correctAnswer']").checkboxradio( "refresh" );

edited May 12 '15 at 13:38

Eric Leschinski

146,994
96
417
335

answered Jul 04 '13 at 13:39

RDD

145
1
18

The function checkboxradio() is not defined in jQuery 2.x. Was this an extension you were using? – justdan23 Feb 27 '20 at 00:09

score -3 · Answer 13 · answered Jun 10 '09 at 17:48

-3

Why don't you do:

$("#radio1, #radio2, #radio3, #radio4").checked = false;

answered Jun 10 '09 at 17:48

cloudhead

15,253
6
42
37

1

You can't just set the checked property on the array returned from the jQuery call, you have to use the attr() function to set that property on the items within the array. – bdukes Jun 10 '09 at 17:54
this is not making then 'unchecked' – Jun 10 '09 at 17:54

How to reset radiobuttons in jQuery so that none is checked

13 Answers13

Linked