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.

Possible duplicate of [Ho do I check if a checkbox is checked?](http://stackoverflow.com/questions/901712/ho-do-i-check-if-a-checkbox-is-checked) — disappointed in SO leadership, May 11 '16 at 22:44

Shady Alset · Accepted Answer · 2016-05-11T22:38:41.847

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>

score 0 · Answer 2 · answered May 11 '16 at 22:14

0

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

answered May 11 '16 at 22:14

user3491401

36
3

score 0 · Answer 3 · answered May 11 '16 at 22:16

0

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;
}

answered May 11 '16 at 22:16

Dakota Kronberger

119
2

This will not work since you return inside the function provided to `$(...).each` – Andreas Louv May 11 '16 at 22:17
That is intended because if any checkboxes have the wrong value, it should return immediately. Doesn't need to check the rest of them. – Dakota Kronberger May 11 '16 at 22:21
You will still only return inside the each function. Which will act as a break but your outer return will always be true. You will need to do something like: `fail = true; return false` and then where you got `return true` you will need: `return fail ? false : true` – Andreas Louv May 11 '16 at 22:24
Ahh I see. Thank you for clarifying, I had missed that. – Dakota Kronberger May 11 '16 at 22:47

score 0 · Answer 4 · answered May 11 '16 at 22:39

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, e.g. 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

score 0 · Answer 5 · answered May 11 '16 at 22:56

$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
        }
    });
});

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

5 Answers5