Question

我有6个问题的列表，3个是正确的（比如id：a，id：c和id：f），3个是错误的。可以单击的复选框的最大nbr是3.如果选中右边的3个框，则显示div id＆＃34;更正＆＃34;，如果选中了错误的框，则显示div div＆＃34;不正确＆＃34;。那些div已隐藏在css（display：none;）

中

这是我的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

Answer 2

第1部分。确保用户在任何时候都不会检查三个以上的复选框。

$("#questions").on('click',function(){
    if ($('input[type="checkbox"]:checked').length > 3) {
        return false;
    }
});

第2部分。检查复选框的数量是否正确。如果是3，则显示＆＃34;非常好＆＃34; div，否则，显示＆＃34;抱歉你犯了错误＆＃34;格。

var correct=0;

$(".checker").on('click',function(){
    $("input:checkbox").each(function(){
        var $this = $(this);    
        if($this.is(":checked")){
            //alert($this.attr("id"));
            if ($this.attr("id") == "a") {
                correct++;
            } else if ($this.attr("id") == "c") {
                correct++;
            } else if ($this.attr("id") == "f") {
                correct++;
            }
        }
    });
    if (correct == 3) {
        document.getElementById('correct').style.display = 'block';
    } else {
        document.getElementById('incorrect').style.display = 'block';
    }
});

示例
JSFIDDLE

Answer 3

// assume its correct ( this won't be drawn to page if we call errorOut )
$('#correct').show();
$('#incorrect').hide();

function errorOut() {
  $('#correct').hide();
  $('#incorrect').show();
}

if ( $('ul [type=checkbox]:checked').length > 3 )
  errorOut();
else
  $(['a', 'c', 'f']).each(function(n, letter) {
    // if each of these aren't checked, it's wrong
    if ( !$('ul [type=checkbox].' + letter).is(':checked') )
      errorOut();
  })

你自己应该知道怎么做..

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

3 个答案: