JQuery:如何检查某个类的所有复选框是否都在表单中选中

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

本文关键字:复选框 是否 表单 何检查 检查 JQuery      更新时间:2023-09-26

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

这就是我到目前为止所拥有的。我不知道如何检查类为"correct"的所有复选框是否都被选中,以及类为"incorrect"的所有框是否都没有被选中。我完全不知道该怎么做。

你可以这样做:

$(".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>

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

如果所有复选框都匹配其类,则可以创建一个返回布尔值的函数:

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

这里有一个简单的例子:

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

然后你可以做一些类似的事情:

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

这只是获取元素的检查状态的一种方法。这本质上是jQuery中.prp()方法的简写,例如elem.prop('checked') // true or false

或者,您可以使用更简单的:checked选择器(适用于复选框、单选框和选项:

$('.correct:checked').length

然后,上述功能将简化为:

var isAllChecked2 = function( className ){
  return $(className + ':checked').length == $(className).length
}

有关更多信息,请参阅相关的jQuery文档:

第一种方法

第二种方法

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