jQuery如何判断复选框是否被选中并包含类名“true”？

Question

我正在使用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>

我需要编写一个函数，当按钮被点击时，检查复选框是否被选中，以及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!');
        }

};

- Dondada

---

[name=checkme] 这个不会匹配你当前 HTML 代码中的复选框，看起来你漏掉了复选框的名称。 - King King

@BoatCode 这并没有帮助。我知道如何查看复选框是否被选中。我的问题是仅在复选框被选中且其父元素包含类“True”时才提供正确的反馈。 - Dondada

如果查看 jQuery，将输出名称 @KingKing。如果单击任何复选框，则会弹出警报。 - Dondada

Answer 1

$('.multiplesubmit').click(function () {
  var correctAnswers = $(this).next('ul').children('li').filter(function () {
    return $(this).hasClass('True') && $(this).find('input[type="checkbox"]:checked').length>0;
  });
  if(correctAnswers.length>0) {
    alert('found')
  }
});

JSFiddle

更新

根据评论

$('.multiplesubmit').click(function () {
  var correctAnswers = $(this).next('ul').children('li').filter(function () {
    return $(this).hasClass('True') && $(this).find('input[type="checkbox"]:checked').length>0;
  });
  var wrongAnswers = $(this).next('ul').children('li').filter(function () {
    return $(this).hasClass('False') && $(this).find('input[type="checkbox"]:checked').length>0;
  });
  if (correctAnswers.length>0 && wrongAnswers.length<1) {
    alert('found')
  }
});

JSFiddle

- T J

---

不起作用。当我调试时，correctAnswers 是未定义的，原因是 next('ul li') 部分。 - Dondada

@Dondada 请尝试更新... - T J

@Dondada 这是个打字错误.. 类名应该是'True'而不是'true'，我通常不使用以大写字母开头的类名... :) - T J

http://jsfiddle.net/tilwinjoy/tzXgM/ - T J

@Dondada 是的，因为你的问题没有涵盖这一点。请再次阅读你的问题，并正确更新问题... - T J

Answer 2

这将逐个检查每个复选框，因为您可能有多个被选中并具有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>

JS Fiddle 示例

- fostermm

---

我的错误。我刚刚发现问题并编辑了我的答案。我还提供了一个带有工作示例的JS Fiddle示例。 - fostermm

Answer 3

试试这个：

我将所有不正确的文本颜色改为红色，正确的文本颜色改为绿色，但我留下了评论，所以你可以根据自己的喜好来处理不正确和正确的答案。

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

    });
});

- Scott Selby

---

我应该将这个放在一个函数中，在按钮点击时调用它吗？ - Dondada

是的，放在按钮点击事件中。我会进行更新。 - Scott Selby

@Dondada - 请查看添加了.parent()的编辑，我刚意识到我的其他代码可能没有正确地更改颜色。 - Scott Selby

我遇到了语法错误。我会尝试修复。 - Dondada