163

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?

Nick is tired
  • 6,860
  • 20
  • 39
  • 51
santa
  • 12,234
  • 49
  • 155
  • 255

10 Answers10

305

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
    }
});
MasterAM
  • 16,283
  • 6
  • 45
  • 66
cbrandolino
  • 5,873
  • 2
  • 19
  • 27
114
$('input.abc').not(':checked').length > 0
Naftali
  • 144,921
  • 39
  • 244
  • 303
Porco
  • 4,163
  • 3
  • 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
  • 7
    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
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.

Mark Coleman
  • 40,542
  • 9
  • 81
  • 101
5
$('.abc[checked!=true]').length == 0
manji
  • 47,442
  • 5
  • 96
  • 103
4

A class independent solution 

var checkBox = 'input[type="checkbox"]';
if ($(checkBox+':checked').length == $(checkBox).length) {
   //Do Something
}
PHPer
  • 637
  • 4
  • 19
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.

shaedrich
  • 5,457
  • 3
  • 26
  • 42
Dave L.
  • 9,595
  • 7
  • 43
  • 69
  • 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
1

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;
    }
});
Nick Cordova
  • 724
  • 6
  • 16
1

This is how I achieved it in my code:

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}
Jaime Montoya
  • 6,915
  • 14
  • 67
  • 103
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.

Steve Wellens
  • 20,506
  • 2
  • 28
  • 69
0

I used this code and it worked well for me.

if($('.abc:checked').length < 1) {
  alert('No checkbox is selected.');
  return false;
} else {
  alert($('.abc:checked').length+' checkboxes have been selected')
}
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
BkenMedia
  • 19
  • 6