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
        }

    });
});

这是我到目前为止所拥有的。我不确定如何检查是否所有带有“正确”类的复选框都被选中，并且是否检查了所有类别为“不正确”的复选框。我完全迷失了如何做到这一点。

Answer 1

你可以这样做：

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

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

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

这是一个简单的例子：

private static Scanner input;

public static void main(String[] args) 
{
    Random rand = new Random();
    int numbertoguess = rand.nextInt(10);
    int numberoftries =0;
    input = new Scanner(System.in);
    int guess;
    boolean win = false;

    while(win == false)
    {
        System.out.println("Guess a number between 1 and 10");
        try
        {
        guess = Integer.parseInt(input.next());
        numberoftries++;

        if (guess == numbertoguess)
        {       
            win = true;
            System.out.println("That is correct !!");
            System.out.println("The number is : " + numbertoguess + " and it took you " + numberoftries + " tries");

        }
        else  
        {
            throw new BadGuessException();
        }
    }
    catch(NumberFormatException e)
    {
        System.out.println("Sorry, you entered an invalid number Format!");
    }
    catch(BadGuessException ex) 
    {
        System.out.println("Sorry, you guessed the wrong number!  ");
    }
}

然后你可以这样做：

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

这只是获取元素检查状态的一种方法。这基本上是jQuery中.prop（）方法的简写，例如... if ( isAllChecked( '.correct' ) && isAllChecked('.incorrect') ){ // do something } ...

或者，您可以使用更简单的elem.prop('checked') // true or false选择器（适用于选中的复选框，广播和选项：

:checked

以上功能将简化为：

$('.correct:checked').length

有关详细信息，请参阅相关的jQuery文档：

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

JQuery：如何检查表单中是否检查了某个类的所有复选框

5 个答案: