Как выбрать все пары "отмеченных" флажков?

#jquery

Вопрос:

У меня следующий вопрос, отображаемый в 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') amp;amp; $("#Question1Answer1User").attr('checked') )
{
    $('#Question1Answer1').css('color','#00AB32'); //that's green for correct
}   
});

Но мне кажется слишком сложным обобщать это.

Вопрос в том, как мне заставить этот код работать для всех ответов (вы можете предположить, конечно, что все ответы имеют одинаковую схему именования).

Спасибо за ваше время!

Ответ №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/> .

Пример на jsfiddle