jQuery评估复选框是不是被选中并包含类true [重复]

Posted 2023-03-10

【中文标题】jQuery评估复选框是不是被选中并包含类true [重复]

【英文标题】：jQuery evaluate if checkbox is checked and contains the class true [duplicate]jQuery评估复选框是否被选中并包含类true [重复]

【发布时间】：2014-07-20 14:36:52

【问题描述】：

我正在使用 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!');
        

;

【问题讨论】：

[name=checkme] 这永远不会匹配您当前 html 代码中的复选框，看起来您错过了复选框的名称。

@BoatCode 这没有帮助。我知道如何查看复选框是否被勾选。我的问题是，只有在复选框被选中的父元素包含“True”类的情况下才能给出正确的反馈

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

【参考方案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

更新

根据 cmets

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

【讨论】：

不起作用。当我调试正确答案时未定义，原因是下一个（'ul li'）部分。

@Dondada 尝试更新...

我输入 $(this).next('ul'); 后得到一个空白数组；在控制台中

@Dondada 这是一个错字.. 类名应该是 'True' 而不是 'true' 我通常从不使用以大写字母开头的类名... :)

这是一个问题。但是 $(this).next('ul') 仍然返回一个空数组。

【参考方案2】：

试试这个：

我将所有不正确的文本颜色更改为红色，正确将文本颜色更改为绿色，但我留下了 cmets，因此您可以为不正确和正确的答案做任何您喜欢的事情

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

    );
);

【讨论】：

我应该把它放在一个函数中并在按钮点击时调用它吗？

是的，输入按钮点击。，我会更新

@Dondada - 请参阅添加 .parent() 的编辑，我刚刚意识到我的其他代码实际上可能没有正确更改颜色

我收到语法错误。我会尝试修复

【参考方案3】：

这将单独检查每个复选框，因为您可以检查多个复选框并具有 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 Example

【讨论】：

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