javascript - 如果选中某些复选框，则 Jquery 显示/隐藏 div

Question

我有一个包含 6 个问题的列表，其中 3 个正确(比如 id:a、id:c 和 id:f)，3 个错误。可以点击的复选框的最大数目是 3。如果选中了正确的 3 个复选框，则显示 div id“correct”，如果选中了错误的复选框，则显示 div id“incorrect”。那些 div 隐藏在 css 中(显示:无；)

这是我的 html:

<ul>
<li><input type="checkbox" id="a" /><label>question1</label></li>
<li><input type="checkbox" id="b" /><label>question2</label></li>
<li><input type="checkbox" id="c" /><label>question3</label></li>
<li><input type="checkbox" id="d" /><label>question4</label></li>
<li><input type="checkbox" id="e" /><label>question5</label></li>
<li><input type="checkbox" id="f" /><label>question6</label></li>
</uL>

<input type="submit" value="check result" />

<div id="correct"><p>very good</p></div>
<div id="incorrect"><p>sorry you have made a mistake</p></div>

Answer 1

像这样

$('input[type="submit"]').on('click', function() {
    var correct = ['a', 'c', 'f'],
        valid   = correct.filter(function(id) {
            return $('#'+id).is(':checked'); 
        }).length === correct.length && 
        $('input[type="checkbox"]:checked').length === correct.length;

    $('#correct').toggle(valid);
    $('#incorrect').toggle(!valid);
});

FIDDLE