Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: Check / uncheck form checkbox and radio

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

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.

13 replies on “jQuery: Check / uncheck form checkbox and radio”

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
}
});
});

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

hi all
try this

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

Comments are closed.