Question

我有以下html显示的问题：

<div id="Question1"><span>1. </span>Which of the following have the same meaning?</div>
<div><input type="checkbox"  id="Question1Answer1Correct" /><input type="checkbox" id="Question1Answer1User"/><span id="Question1Answer1">String</span></div> 
<div><input type="checkbox"  id="Question1Answer2Correct" /><input type="checkbox" id="Question1Answer2User"/><span id="Question1Answer2">string</span></div>
<div><input type="checkbox" id="Question1Answer3Correct" /><input type="checkbox" id="Question1Answer3User"/><span id="Question1Answer3">Integer</span></div>
<div><input type="checkbox"  id="Question1Answer4Correct" /><input type="checkbox" id="Question1Answer4User"/><span id="Question1Answer4">int</span></div>
</div>

现在我需要检索所有已选中“正确”和“用户”复选框的答案 - 并将其标记为正确，所有那些“正确”和“用户”复选框都未选中 - 并将其标记为正确，并将所有其他答案标记为不正确。

我开始这样做：

$('#checkAnswers').click(function(){            
    $.each($("input[id^='Question1Answer1']"),function(){ 

    if ($("#Question1Answer1Correct").attr('checked') && $("#Question1Answer1User").attr('checked') )
{
    $('#Question1Answer1').css('color','#00AB32'); //that's green for correct
}   
});

但是我觉得这很难概括问题是 - 如何使此代码适用于所有答案（您可以假设所有答案都具有相同的命名方案）。

谢谢你的时间！

Answer 1

我认为您应该可以使用.filter()

来实现这一目标

$('#checkAnswers').click(function() {
    $("span").css("color", "");
    $("div > :checkbox").parent().filter(function() {
        return $(this).find(":checked").length == 2 || $(this).find(":checked").length == 0;
    }).find("span").css('color', '#00AB32');
});

仅定位div中的复选框，使用.parent()然后使用.filter()仅查找具有0个检查或两者都选中的元素，并简单地为<span/>着色。

<强> Example on jsfiddle

如何选择所有“已选中”复选框对？

1 个答案: