JQuery: How to check if all checkboxes of a certain class are checked within a form

Question

HTML:

<form class="thirdlevel" id="monkeybox">
    <input type="checkbox" name="monkey" value="monkey" class="correct"> Monkey <br>
    <input type="checkbox" name="monkey" value="yellow" class="incorrect"> Yellow <br>
    <input type="checkbox" name="monkey" value="brown" class="correct"> Brown <br>
    <input type="checkbox" name="monkey" value="human" class="incorrect"> Human <br>
    <input type="checkbox" name="monkey" value="mouse" class="incorrect"> Mouse<br>
    <input type="checkbox" name="monkey" value="horse" class="incorrect"> Horse <br>
    <input type="checkbox" name="monkey" value="hairy" class="correct"> Hairy <br>
    <input type="checkbox" name="monkey" value="land" class="correct"> Land creature<br>
</form>

JS:

$monkeybox.on("change", function() {

    $(":checkbox").on("change", function() {

        if (all checkboxes with class "correct" are checked && all checkboxes with class "incorrect" aren't checked) {
           //do something
        }

    });
});

This is what I have so far. I'm not sure how to check if all checkboxes with class "correct" are checked and if all checkboxes that have class "incorrect" aren't checked. I'm completely lost on how to do this.

Answer 1

You can do it in this way:

 $(".correct, .incorrect").change(function(){ if ($('.correct:checked').length == $('.correct').length) { if ($('.incorrect:checked').length == 0) // Check if all checkboxes with class "correct" are checked, and all checkboxes that have class "incorrect" aren't checked. alert("all correct is checked, and all incorrect is unchecked"); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="thirdlevel" id="monkeybox"> <input type="checkbox" name="monkey" value="monkey" class="correct"> Monkey <br> <input type="checkbox" name="monkey" value="yellow" class="incorrect"> Yellow <br> <input type="checkbox" name="monkey" value="brown" class="correct"> Brown <br> <input type="checkbox" name="monkey" value="human" class="incorrect"> Human <br> <input type="checkbox" name="monkey" value="mouse" class="incorrect"> Mouse<br> <input type="checkbox" name="monkey" value="horse" class="incorrect"> Horse <br> <input type="checkbox" name="monkey" value="hairy" class="correct"> Hairy <br> <input type="checkbox" name="monkey" value="land" class="correct"> Land creature<br> </form>

Answer 2

    $( "input[type=checkbox].correct:checked" ).length ==$('input[type=checkbox].correct').length && $( "input[type=checkbox].incorrect:checked" ).length==0

Answer 3

You could create a function that returns a Boolean value if all checkboxes match their classes:

function checkIfBoxesCorrect() {
    $("#monkeybox input").each(function(){
        // For each checkbox, 
        //     check if the class matches the isChecked value

        if( $(this).attr("checked") ) {
            if( $(this).hasClass("incorrect") ){
                return false;
            }
        } else {
            if( $(this).hasClass("correct") ){
                return false;
            }
        }
    });

    return true;
}

Answer 4

Here is a simple example:

var isAllChecked = function( className ){
  'use strict';

  var elems = $( className );
  var isAllchecked = false;
  var numChecked = 0;

  $.each( elems, function(idx, item){
      if( item.checked )
        numChecked += 1;
  });

  if( numChecked === elems.length )
    isAllchecked = true;

  return isAllchecked;
}

Then you could do something like:

...
if ( isAllChecked( '.correct' ) && isAllChecked('.incorrect') ){
    // do something
}
...

This is just one way to get the checked state of an element. This is essentially a shorthand for the .prop() method in jQuery, eg elem.prop('checked') // true or false

Alternatively, you can use the simpler :checked selector (works for checkboxes, radio and options on selects:

$('.correct:checked').length

The above function would then be reduced to:

var isAllChecked2 = function( className ){

  return $(className + ':checked').length == $(className).length

}

See the relevant jQuery docs for more info:

1st method

2nd method

Answer 5

$monkeybox.on("change", function() {
    $(":checkbox").on("change", function() {
        if ( 
             $(this).hasClass("correct").not(":checked").length == 0 &&  
             $(this).hasClass("incorrect").is(":checked").length == 0
            ) {
                //do something
        }
    });
});