In jQuery how do you check and uncheck all checkboxes using an element?

Question

I have the following code. It checks all the checkboxes on the page using the LABEL element which is usually on top of the checkboxes. Now how do I use the same LABEL element to uncheck all the boxes?

jQuery(document).ready(function($) {

 var $checkBoxes = $('input[type="checkbox"]');

 $('label').click(function() {
   $checkBoxes.attr('checked', true);
 });
});

what happens when some(not all) of the checkboxes are checked - would you check all or uncheck all? — wirey00, Jul 03 '13 at 20:48

score 5 · Accepted Answer · answered Jul 03 '13 at 20:48

5

Use:

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

answered Jul 03 '13 at 20:48

Anand Shah

180
5

+1 excellent.this is what i am searching for – Rasel Oct 29 '14 at 09:16

score 3 · Answer 2 · answered Jul 03 '13 at 20:49

3

For toggling, you need to store the state somewhere, like in data() :

jQuery(document).ready(function($) {
    var $checkBoxes = $('input[type="checkbox"]');

    $('label').on('click', function() {
        var check = !$(this).data('checked');
        $checkBoxes.prop('checked', check);
        $(this).data('checked', check);
    });
});

FIDDLE

answered Jul 03 '13 at 20:49

adeneo

312,895
29
395
388

In most systems I've used, the "check-all" element is also a checkbox, so you can just use its `:checked` state to save the value. – Barmar Jul 03 '13 at 20:52
@Barmar - in this case the OP has only stated that it's a label, and not if it contains a checkbox or not ? – adeneo Jul 03 '13 at 20:53

DarkAjax · Answer 3 · 2013-07-03T20:57:07.463

2

You can try something like:

var checked = 0;

$('label').click(function() {
   if(checked) {
       $checkBoxes.prop('checked', true);
       checked = 1;
   } else {
        $checkBoxes.prop('checked',false);
        checked = 0;
   }
 });

edited Jul 03 '13 at 20:57

answered Jul 03 '13 at 20:49

DarkAjax

15,955
11
53
65

[Do not use this method to remove native properties such as checked ...](http://api.jquery.com/removeProp/) – a better oliver Jul 03 '13 at 20:55
@zeroflagL Indeed thanks for the reminder! – DarkAjax Jul 03 '13 at 20:57

score 0 · Answer 4 · answered Jul 03 '13 at 20:50

First of all, use .prop() instead of .attr().

This code should work (not tested):

$checkBoxes.prop('checked', $checkBoxes.not(':checked').length ? true : false);

After a second reading, im not sure if that's what you want. Do you want a "checkall" button so when you click on it, if 1 or more checkboxes is unchecked, it check all else uncheck all or really a "toggle button"?

score 0 · Answer 5 · answered Jul 03 '13 at 20:52

0

All on or all off. Plus a closure to keep it all tightly scoped.

$('label').click((function () {

   var state = false;

   return function () {
      $checkBoxes.prop('checked', state = !state);
   };
}()));

answered Jul 03 '13 at 20:52

John Strickler

25,151
4
52
68

In jQuery how do you check and uncheck all checkboxes using an element?

5 Answers5

Linked