多自动测验在jquery自定义提醒

Question

有点新jQuery和我有一个多答案测验问题。它正常工作，直到我添加自定义错误消息。

该问题有多个正确的答案，检查顶部的变量。我希望这个问题也能检查他们是否选中了所有的复选框或者没有复选框。它通过警报消息向用户提供反馈。

以下是我的jsfiddle ...单击“提交”按钮时不检查任何框，您将看到自定义警报显示两次（第二个警报错误）。然后注释掉替换警告框的第一个“window.alert”行代码，它会显示一个错误，然后显示另一个错误（理想方式）。

有没有更好的方法，我可以构建我的if语句来同时检查盒子检查量和正确答案？

http://jsfiddle.net/bregm/6/

  <p>Please select the 5 correct answers:</p> 


    <label><input type="checkbox" name="q1" class="wrong"></input>Answer 0 </label> 
    <label><input type="checkbox" name="q1" id="q1-a"></input>Answer 1</label> 
    <label><input type="checkbox" name="q1" class="wrong"></input>Answer 2 </label> 
    <label><input type="checkbox" name="q1" id="q1-b"></input>Answer 3</label> 
    <label><input type="checkbox" name="q1" id="q1-c" ></input>Answer 4 </label> 
    <label><input type="checkbox" name="q1" id="" class="wrong"></input>Answer 5</label>  
    <label><input type="checkbox" name="q1" id="" class="wrong"></input>Answer 6</label> 
    <label><input type="checkbox" name="q1" id="q1-d" ></input>Answer 7</label> 
    <label><input type="checkbox" name="q1" id="q1-e" ></input>Answer 8</label> 

<br /> 
<button class="submit1">Submit1</button> 
    <div id="messageBox"> </div> 

#messageBox { 
position: fixed; 
top:40%; 
left: 20px; 
width: 240px; 
height:auto; 
font-family: Arial, Helvetica, Sans-Serif; 
font-size: 12px; 
background-color:#F93; 
color: #FFFFFF; 
padding: 6px; 
display: none; 
border: 1px solid #ccc; 
border-radius: 4px; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
box-shadow: 8px 8px 8px #000; 
padding: 1em; 

} 
window.alert = function(message) { 
     $('#messageBox').text(message).fadeIn().delay(1000).fadeOut('slow'); 
    //comment out this bit of code and you can see my issue. 
    } 

    $(function(){ 
     //correct answers stored here by id 
     var rules = ['q1-a,q1-b,q1-c,q1-d,q1-e']; 


    $('.submit1').click(function(e) { 
      e.preventDefault(); 
      ///checks to see how many checkboxes have been clicked 
      var countchecked1 = $("input[name=q1]:checked").length; 
       if(countchecked1 == 0) 
       { 
       alert("You have not selected any checkboxes."); 
       } 
       if(countchecked1 == 9) 
       { 
       alert("Cheating.. You can't select all the boxes."); 
       $('input[name=q1]:checked').removeAttr('checked'); 
       return false; 
       } 

    //check correct answers from var above 
      if($('input[name=q1]:checked').map(function(i,v) { return v.id; }).get().join(',') == rules[0]) { 
       alert("Correct! you selected the correct answers. "); 
       return false; 
       } 
      else 
       { 
       $('input[type="checkbox"].wrong:checked').parent('label').addClass('highlight');  
       $('.wrong:checked').attr('disabled', 'disabled'); 
       $('.wrong:checked').removeAttr('checked'); 
       alert("Incorrect... Please try again"); 
       return false; 
      } 


     }); 
    }); 

Answer 1

你应该改变所有的if s转换else if秒。这样，代码在找到匹配后就完成了。否则，即使已经满足条件，代码仍会继续运行。这不仅更有效率，而且在这种情况下也是必要的。

$('.submit1').click(function(e) { 
     e.preventDefault(); 
     ///checks to see how many checkboxes have been clicked 
     var countchecked1 = $("input[name=q1]:checked").length; 
      if(countchecked1 == 0) 
      { 
      alert("You have not selected any checkboxes."); 
      } 
      else if(countchecked1 == 9) 
      { 
      alert("Cheating.. You can't select all the boxes."); 
      $('input[name=q1]:checked').removeAttr('checked'); 
      return false; 
      } 

//check correct answers from var above 
     else if($('input[name=q1]:checked').map(function(i,v) { return v.id; }).get().join(',') == rules[0]) { 
      alert("Correct! you selected the correct answers. "); 
      return false; 
      } 
     else 
      { 
      $('input[type="checkbox"].wrong:checked').parent('label').addClass('highlight');  
      $('.wrong:checked').attr('disabled', 'disabled').removeAttr('checked'); 
      alert("Incorrect... Please try again"); 
      return false; 
     } 


    }); 

还可以使用链接，以便jQuery不会有再通过DOM树进行搜索：

$('.wrong:checked').attr('disabled', 'disabled').removeAttr('checked'); 

如果我是你，我不会允许超过5个对号同时。

的jsfiddle：http://jsfiddle.net/bregm/9/

Answer 2

嗯，我想即使下面的代码就可以了，你已经加入wrong类的所有错误的答案

$('.submit1').click(function (e) { 
    e.preventDefault(); 
    ///checks to see how many checkboxes have been clicked 
    var $inputq = $("input[name=q1]"); 
    var $checked = $inputq.filter(":checked"); 

    if ($checked.length == $inputq.length) { 
     alert("Cheating.. You can't select all the boxes."); 
     $checked.removeAttr('checked'); 
     return false; 
    } 
    var wrongChecked = $('input[type="checkbox"].wrong:checked'); 
    if (wrongChecked.length > 0) { 
     wrongChecked.parent('label').addClass('highlight'); 
     wrongChecked.attr('disabled', 'disabled'); 
     wrongChecked.removeAttr('checked'); 
     alert("Incorrect... Please try again"); 
     return false; 
    } else if ($checked.length == 5) { 
     alert("Correct! you selected the correct answers. "); 
     return false; 
    } else { 
     alert("You have not selected All correct checkboxes."); 
     return false; 
    } 
}); 

http://jsfiddle.net/bregm/8/