Setting “checked” for a checkbox with jQuery?

+3437 votes
asked Jan 8, 2009 by tpower

I'd like to do something like this to tick a checkbox using jQuery:

$(".myCheckBox").checked(true);

or

$(".myCheckBox").selected(true);

Does such a thing exist?

28 Answers

+282 votes
answered Jan 8, 2009 by christopher-harris

This is the correct way of checking and unchecking checkboxes with jQuery, as it is cross-platform standard, and will allow form reposts.

$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });

By doing this, you are using JavaScript standards for checking and unchecking checkboxes, so any browser that properly implements the "checked" property of the checkbox element will run this code flawlessly. This should be all major browsers, but I am unable to test previous to Internet Explorer 9.

The Problem (jQuery 1.6):

Once a user clicks on a checkbox, that checkbox stops responding to the "checked" attribute changes.

Here is an example of the checkbox attribute failing to do the job after someone has clicked the checkbox (this happens in Chrome).

Fiddle

The Solution:

By using JavaScript's "checked" property on the DOM elements, we are able to solve the problem directly, instead of trying to manipulate the DOM into doing what we want it to do.

Fiddle

This plugin will alter the checked property of any elements selected by jQuery, and successfully check and uncheck checkboxes under all circumstances. So, while this may seem like an over-bearing solution, it will make your site's user experience better, and help prevent user frustration.

(function( $ ) { $.fn.checked = function(value) { if(value === true || value === false) { // Set the value of the checkbox $(this).each(function(){ this.checked = value; }); } else if(value === undefined || value === 'toggle') { // Toggle the checkbox $(this).each(function(){ this.checked = !this.checked; }); } return this; };
})( jQuery );

Alternatively, if you do not want to use a plugin, you can use the following code snippets:

// Check
$(':checkbox').prop('checked', true);
// Un-check
$(':checkbox').prop('checked', false);
// Toggle
$(':checkbox').prop('checked', function (i, value) { return !value;
});
+5218 votes
answered Jan 8, 2009 by xian

jQuery 1.6+

Use the new .prop() method:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x and below

The .prop() method is not available, so you need to use .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using

$('.myCheckbox').removeAttr('checked');

since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it - a subtle but probably unwelcome behaviour change.

For more context, some incomplete discussion of the changes to the handling of the checked attribute/property in the transition from 1.5.x to 1.6 can be found in the version 1.6 release notes and the Attributes vs. Properties section of the documentation.

Any version of jQuery

If you're working with just one element, you can always just modify the HTMLInputElement's .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.

+66 votes
answered Jan 8, 2009 by livefree75

You can also extend the $.fn object with new methods:

(function($) { $.fn.extend({ check : function() { return this.filter(":radio, :checkbox").attr("checked", true); }, uncheck : function() { return this.filter(":radio, :checkbox").removeAttr("checked"); } });
}(jQuery));

Then you can just do:

$(":checkbox").check();
$(":checkbox").uncheck();

Or you may want to give them more unique names like mycheck() and myuncheck() in case you use some other library that uses those names.

+128 votes
answered Aug 20, 2010 by micah

You can do

$('.myCheckbox').attr('checked',true) //Standards compliant

or

$("form #mycheckbox").attr('checked', true)

If you have custom code in the onclick event for the checkbox that you want to fire, use this one instead:

$("#mycheckbox").click();

You can uncheck by removing the attribute entirely:

$('.myCheckbox').removeAttr('checked')

You can check all checkboxes like this:

$(".myCheckbox").each(function(){ $("#mycheckbox").click()
});
+42 votes
answered Sep 20, 2010 by overbeeke

Assuming that the question is...

How do I check a checkbox-set BY VALUE?

Remember that in a typical checkbox set, all input tags have the same name, they differ by the attribute value: there are no ID for each input of the set.

Xian's answer can be extended with a more specific selector, using the following line of code:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
+57 votes
answered Mar 23, 2011 by chris-brandsma
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

The last one will fire the click event for the checkbox, the others will not. So if you have custom code in the onclick event for the checkbox that you want to fire, use the last one.

+608 votes
answered May 6, 2011 by bchhun

Use:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

And if you want to check if a checkbox is checked or not:

$('.myCheckbox').is(':checked');
+25 votes
answered Jun 24, 2011 by clement-ho

Here is code for checked and unchecked with a button:

var set=1;
var unset=0;
jQuery( function() { $( '.checkAll' ).live('click', function() { $( '.cb-element' ).each(function () { if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; } if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; } }); set=unset; });
});

Update: Here is the same code block using the newer Jquery 1.6+ prop method, which replaces attr:

var set=1;
var unset=0;
jQuery( function() { $( '.checkAll' ).live('click', function() { $( '.cb-element' ).each(function () { if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; } if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; } }); set=unset; });
});
+32 votes
answered Oct 25, 2011 by prashanth

Here is a way to do it without jQuery

function addOrAttachListener(el, type, listener, useCapture) { if (el.addEventListener) { el.addEventListener(type, listener, useCapture); } else if (el.attachEvent) { el.attachEvent("on" + type, listener); }
};
addOrAttachListener(window, "load", function() { var cbElem = document.getElementById("cb"); var rcbElem = document.getElementById("rcb"); addOrAttachListener(cbElem, "click", function() { rcbElem.checked = cbElem.checked; }, false);
}, false);
<label>Click Me! <input id="cb" type="checkbox" />
</label>
<label>Reflection: <input id="rcb" type="checkbox" />
</label>
+13 votes
answered Jan 5, 2012 by serhat-koroglu

Plain JavaScript is very simple and much less overhead:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{ elements[i].checked = true;
}

Example here

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...