Question

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

该问题有多个正确答案，可以根据顶部的变量进行检查。我想要问题还要检查他们是否选中了所有复选框或没有复选框。它通过警报消息为用户提供反馈。

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

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

         <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更改为else if s。这样，代码在找到匹配后就完成了。否则，即使已满足条件，代码仍会继续运行。它不仅效率更高，而且在这种情况下是必要的。

$('.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/

jquery中的多答案测验与自定义警报

2 个答案: