1

jquery は初めてで、複数回答のクイズの質問があります。カスタム エラー メッセージを追加するまで、正常に動作しています。

質問には、上部の変数に対してチェックされる複数の正解があります。質問で、すべてのチェックボックスが選択されているか、チェックボックスが選択されていないかも確認したいと思います。警告メッセージを介してユーザーにフィードバックを提供します。

以下は私のjsfiddleです...ボックスをチェックせずに「送信」ボタンをクリックすると、カスタムアラートが2回表示されます（2番目のアラートエラー）。次に、アラート ボックスを置き換える js コードの最初の "window.alert" 行をコメント アウトすると、1 つのエラーが表示され、次に別のエラーが表示されます (理想的な方法)。

ボックスチェックの量と正解を同時にチェックする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;
             }


         });
    });
4

2 に答える 2

0

すべてのifs をelse ifs に変更する必要があります。そうすれば、一致が見つかった後にコードが終了します。それ以外の場合、コードは条件を満たした後でも引き続き実行されます。より効率的であるだけでなく、この場合に必要です。

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

于 2013-04-23T17:19:06.687 に答える
0

まあ、あなたはすでに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/

于 2013-04-23T17:32:12.747 に答える