Javascript 如果选中jQuery evaluate if复选框并包含类true，则该复选框将进行计算

我正在使用jQuery创建一个选择题评估。目前，DOM结构如下所示：

<button class="multiplesubmit">Check Answer</button>
<ul class="multiplechoice_answergroup">
<li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1</li>
<li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1</li>
<li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1</li>
<li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1</li>
</ul>

检查答案

回答1
回答1
回答1
回答1

我需要编写一个函数，当单击按钮时，查看复选框是否勾选，并且li的类名是否包含“True”

到目前为止，这是我的jQuery：

      $('.multiplechoice_answer .Paragraph').prepend('<input class="checkbox" type="checkbox" name="checkme" />');
      $('.multiplechoice_wrap').prepend('<button class="submit_button multiplesubmit">Check Answer</button>');


      $('.multiplesubmit').click(function() {
        multipleChoiceCheck();

      });

      var multipleChoiceCheck = function() {
        if($('input:checkbox[name=checkme]').is(':checked') && $('.multiplechoice_answer').hasClass('True')) {
          alert('correct!');
        }

};

$（'.multiplechoice_answer.paration'）。前缀（''；
$（'.multiplechoice_wrap'）。前置（'检查答案'）；
$（'.multiplesubmit'）。单击（函数（）{
多重回声检查（）；
});
var multipleChoiceCheck=函数（）{
if（$（'input:checkbox[name=checkme]'）.is（':checked'）&&（$（'.multipleechoice_answer'）.hasClass（'True'））{
警惕（“正确！”）；
}
};

更新

根据评论

$（'.multiplesubmit'）。单击（函数（）{
var correctAnswers=$（this）.next（'ul'）.children（'li'）.filter（函数）（）{
返回$（this）.hasClass（'True'）&&$（this）.find（'input[type=“checkbox”]：checked'）。长度>0；
});
var errowanswers=$（this）.next（'ul'）.children（'li'）.filter（函数）（）{
返回$（this）.hasClass（'False'）&&$（this）.find（'input[type=“checkbox”]：checked'）。长度>0；
});
if（correctAnswers.length>0&&ErrorAnswers.length这将分别选中每个复选框，因为您可以选中多个复选框，并且具有True类

$(document).ready(function() {
  $('.multiplesubmit').click(function() {
    multipleChoiceCheck();
  });
});

function multipleChoiceCheck() {
  $(".multiplechoice_answergroup").find("input[type=checkbox]").each(function() {
    var $this = $(this);
    if($this.prop("checked") && $this.parent().hasClass("True")) {
      alert($this.val());
    }
  });
}

我在复选框中添加了值以区分答案：

<button class="multiplesubmit">Check Answer</button>
<ul class="multiplechoice_answergroup">
    <li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 1"> Answer 1</li>
    <li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 2"> Answer 2</li>
    <li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 3"> Answer 3</li>
    <li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 4"> Answer 4</li>
</ul>

检查答案

回答1
回答2
回答3
回答4


试试这个：

我将文本的颜色更改为红色表示所有错误，绿色表示正确，但我留下了评论，以便您可以对错误和正确的答案做任何您喜欢的事情

$('.multiplesubmit').click(function() {
    $.each('input:checkbox[name=checkme]', function(){
    if( $(this).is(':checked'){
        if( $(this).hasClass('True'){       
           // CHECKED - CORRECT
           $(this).parent().css({ 'color' : 'green' });
         }
         else{
           // CHECKED - INCORRECT
           $(this).parent().css({ 'color' : 'red' });
         }
    }
    else{
      if( $(this).hasClass('True'){       
        // UN-CHECKED - INCORRECT
        $(this).parent().css({ 'color' : 'red' });
      }
        else{
       // UNCHECKED - CORRECT
        $(this).parent().css({ 'color' : 'green' });
      }

    });
});

[name=checkme]
这与您当前HTML代码中的复选框永远不匹配，看起来您错过了复选框的名称。@BoatCode这没有帮助。我知道如何查看复选框是否被勾选。我的问题是，只有在复选框被勾选时，它的父元素包含类“True”，才能给出正确的反馈@KingKing如果您查看jquery，则会输出名称。如果单击任何复选框，则会弹出警报。Dosen不起作用。调试时，correctAnswers未定义，原因是下一个（'ul li'）部分。@Dondada尝试更新…键入$（this）后，我会得到一个空白数组。下一个（'ul'）在里面console@Dondada这是一个输入错误。类名应该是'True'而不是'True'，我通常不使用以大写开头的类名…：）这是一个问题。但仍然是$（this）。next（'ul'））返回一个空数组。我是否应该将其放入函数中并在单击按钮时调用它？是的，请单击按钮，我会的update@Dondada-请参见adding.parent（）的编辑，我刚刚意识到我的其他代码可能没有正确地更改颜色。我会尝试修复我的错误。我刚刚发现问题并编辑了我的答案。我还提供了一个JS Fiddle示例和一个工作示例。
<button class="multiplesubmit">Check Answer</button>
<ul class="multiplechoice_answergroup">
    <li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 1"> Answer 1</li>
    <li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 2"> Answer 2</li>
    <li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 3"> Answer 3</li>
    <li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 4"> Answer 4</li>
</ul>

$('.multiplesubmit').click(function() {
    $.each('input:checkbox[name=checkme]', function(){
    if( $(this).is(':checked'){
        if( $(this).hasClass('True'){       
           // CHECKED - CORRECT
           $(this).parent().css({ 'color' : 'green' });
         }
         else{
           // CHECKED - INCORRECT
           $(this).parent().css({ 'color' : 'red' });
         }
    }
    else{
      if( $(this).hasClass('True'){       
        // UN-CHECKED - INCORRECT
        $(this).parent().css({ 'color' : 'red' });
      }
        else{
       // UNCHECKED - CORRECT
        $(this).parent().css({ 'color' : 'green' });
      }

    });
});