Check if all checkboxes are selected

Question

How do I check if all checkboxes with class="abc" are selected?

I need to check it every time one of them is checked or unchecked. Do I do it on click or change?

score 289 · Accepted Answer · edited Jun 04 '15 at 21:04

289

I think the easiest way is checking for this condition:

$('.abc:checked').length == $('.abc').length

You could do it every time a new checkbox is checked:

$(".abc").change(function(){
    if ($('.abc:checked').length == $('.abc').length) {
       //do something
    }
});

edited Jun 04 '15 at 21:04

MasterAM

15,644
6
43
63

answered Apr 04 '11 at 16:34

cbrandolino

5,703
2
18
27

2

`length` is not a funcion i think you meant ..`size()` – Jishnu A P Apr 04 '11 at 16:36
4

Thanks @TheSuperTramp! I meant `length`, but I never fail to forget it's a property and not a method. Corrected – cbrandolino Apr 04 '11 at 16:38
That was so neat, you just saved me about half an hour :D – Mihail Minkov May 11 '21 at 17:56

score 109 · Answer 2 · edited Apr 04 '11 at 16:32

109

$('input.abc').not(':checked').length > 0

edited Apr 04 '11 at 16:32

Naftali

142,114
39
237
299

answered Apr 04 '11 at 16:31

Porco

4,045
2
22
25

2

Perfect, clean and elegant solution. "if ($('input.abc').not(":checked").length) {...}" also works. – Skorunka František Oct 21 '16 at 16:43
6

That answer not correct. It checking if there is any checkboxes checked. But question is _Check if **all** checkboxes are selected_. So the correct code is: `$('input.abc').not(':checked').length === 0`. – Artem P Jun 20 '17 at 13:37
1

This answer is better than the accepted answer if you consider performance. This will loop just once, instead of twice. – Maarten Kieft Oct 07 '17 at 18:15
1

This approach is cleaner because it does not require knowing the selector used to obtain the original jQuery collection - similarly you can use `$someCollection.is(':checked').length` for other related tests. Also see https://stackoverflow.com/questions/16576560 for notes about further optimization. – Jake Sep 25 '20 at 23:55

score 17 · Answer 3 · answered Apr 04 '11 at 16:31

17

You can use change()

$("input[type='checkbox'].abc").change(function(){
    var a = $("input[type='checkbox'].abc");
    if(a.length == a.filter(":checked").length){
        alert('all checked');
    }
});

All this will do is verify that the total number of .abc checkboxes matches the total number of .abc:checked.

Code example on jsfiddle.

answered Apr 04 '11 at 16:31

Mark Coleman

39,942
9
80
101

Not really sure why, but my a.length gives me a value of 8 while I have only 4 checkboxes. – santa Apr 04 '11 at 17:01
The `filter` is a good solution for a group of checkboxes, thanks much. – overallduka Sep 11 '14 at 16:54

score 5 · Answer 4 · answered Apr 04 '11 at 16:33

5

$('.abc[checked!=true]').length == 0

answered Apr 04 '11 at 16:33

manji

46,486
4
90
101

score 4 · Answer 5 · edited Jun 07 '21 at 07:45

4

Part 1 of your question:

var allChecked = true;
$("input.abc").each(function(index, element){
  if(!element.checked){
    allChecked = false;
    return false;
  } 
});

EDIT:

The (above answer) is probably better.

edited Jun 07 '21 at 07:45

shaedrich

4,826
2
26
35

answered Apr 04 '11 at 16:29

Dave L.

9,203
7
41
65

This is the most efficient answer, because it short-circuits as soon as an unchecked box is found. However, you can use `this` rather than `element` to avoid the callback requiring any explicit parameters. – Jake Sep 25 '20 at 23:56

score 2 · Answer 6 · answered Jan 14 '18 at 10:18

2

A class independent solution

var checkBox = 'input[type="checkbox"]';
if ($(checkBox+':checked').length == $(checkBox).length) {
   //Do Something
}

answered Jan 14 '18 at 10:18

PHPer

578
3
19

score 1 · Answer 7 · answered May 16 '17 at 17:42

Alternatively, you could have also used every():

// Cache DOM Lookup
var abc = $(".abc");

// On Click
abc.on("click",function(){

    // Check if all items in list are selected
    if(abc.toArray().every(areSelected)){
        //do something
    }

    function areSelected(element, index, array){
        return array[index].checked;
    }
});

score 1 · Answer 8 · answered Sep 21 '18 at 20:40

1

This is how I achieved it in my code:

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}

answered Sep 21 '18 at 20:40

Jaime Montoya

5,968
7
60
85

score 1 · Answer 9 · answered Apr 04 '11 at 16:37

1

The search criteria is one of these:

input[type=checkbox].MyClass:not(:checked)
input[type=checkbox].MyClass:checked

You probably want to connect to the change event.

answered Apr 04 '11 at 16:37

Steve Wellens

20,326
2
25
66

Check if all checkboxes are selected

9 Answers9

Linked

Related