jQuery: Check / uncheck form checkbox and radio

by Yang Yang on April 16, 2009

Using both attr() and removeAttr() functions, it’s actually the same as enabling and disabling form controls with jQuery.

$("#option").attr("checked", "checked"); // make checkbox or radio checked
$("#option").removeAttr("checked"); // uncheck the checkbox or radio

Subscribe to Kavoir: blog feed

You should also read:

Reza June 30, 2009 at 3:22 pm

This methods seems to be not working in Internet Explorer. Any solution?

Sebastiaan Stok February 18, 2010 at 12:07 am

Try using $(“#option”)..attr(‘checked’,false); Instead, this make it work like the old getElementsById().checked=false

Source: http://stackoverflow.com/questions/1523334/jquery-check-and-uncheck-checkbox-with-a-link

Yang Yang February 26, 2010 at 5:23 pm

Awesome tip! Thanks!

Мах September 6, 2010 at 6:53 pm

Thank you!

Patrick Rietveld October 1, 2010 at 7:06 pm

The following script will allow you to uncheck all radiobuttons on the page

$(document).ready(function() {
$(“input[type='radio']“).mousedown(function(e) {
if ($(this).attr(“checked”) == true) {
setTimeout(“$(‘input[id=" + $(this).attr('id') + "]‘).removeAttr(‘checked’);”, 200);}
else {
return true
}
});
});

Josh July 28, 2011 at 3:12 am

Do NOT do it this way! OMG NO! I saw how horrific this code was and felt compelled to post because it was one of the top hits for a Google search.

Line 3: $(“input[type='radio']“).mousedown(function(e) {

Mousedown is not the correct event for this situation. I believe the author intended to use the “change” event, so it will fire when a radio value changes after selecting a new value. This code will only work if a mouse changes the radio and not the keyboard, scrips, or any other input medium, but change does. I believe he meant to write:

$(“input[type='radio']“).change(function(e) {

Line 4: if ($(this).attr(“checked”) == true) {

The “== true” part of the conditional is not required! It’s just wasteful. One could have very well instead have written:

if ($(this).attr(“checked”) == true && true && false == false && “bob” != “sue” || false ) {

This is just wasted processing and excess characters.

If the author wanted to know if the attribute “checked” had the boolean value true, he should have used === instead of == because any number not 0 and any string not null or “” (empty) will be true. With that being said, its worth noting the HTML standard indicates a checkbox’s “checked” attribute *should* only have the value “checked” if checked and be nonexistent otherwise. (which is why the article’s author uses removeAttr instead of setting checked to true or false. Another person commented on an older IE bug, but that’s IE for you!). I believe he meant to write:

if ($(this).attr(“checked”)) {

Line 5: setTimeout(“$(‘input[id=" + $(this).attr('id') + "]‘).removeAttr(‘checked’);”, 200);}

Whenever you see a timeout in JavaScript, be weary! It is almost never the proper solution because of race conditions. The author is using a timeout as a patch around his earlier mistake of using mousedown. If a user changes a checkbox via a mouse, mousedown will happen before the value is changed and theresulting change event fires. This is why the checkbox’s value has the old value and the real code can’t be applied the time the mousedown event fires. The author is hoping the user will release the mouse in under 200 milliseconds and the change event happens before the timeout gets called. That means if a user clicks and holds the radio for any longer than 200 milliseconds (if the user decided he did not want to select the checkbox and was about to pull the mouse off the element for example), the code for removing the radio’s check would not work!

Line 6: return true

Another needless piece of code. Returning a value from within an event handler is only useful if the handler returns a false value (0, “”, false, or null for example) to stop any other handler from receiving the event. Any true value, or even nothing at all will allow the event to behave as normal.

To achieve “unchecking all radiobuttons on the page,” I would have written the code with jquery’s live function to make sure the code works if new checkboxes are added. I believe what the author meant to write was:
Here is how I would rewrite the code above:
$( “input[type='radio']“ ).change( function() {
$( this ).removeAttr(“checked”);
});

Regards,
Josh

Lee November 24, 2011 at 10:20 am

Listen to this man.

test January 4, 2011 at 6:46 am
Dewang August 25, 2011 at 8:27 pm

@ original description
Your solution worked!!!!!!!!!!!
Thank you very much!!!!!!!!!!!!!!!

Bhavin March 5, 2012 at 2:34 pm

it works ..
many thanks …
:D

prassanth September 10, 2012 at 6:30 pm

hi all
try this

$(‘#checkboxid’).get(0).checked = true ; //for checking
$(‘#checkboxid’).get(0).checked = false; //for unchecking

Helen Neely September 12, 2012 at 1:15 am

Nice tip. This worked for me.
Thanks for the nice tip

Vannessa March 28, 2013 at 3:37 pm

Many Thanks, I really only need this simple one:)

Comments on this entry are closed.

Previous post:

Next post: