循環選中複選框，然後顯示結果

Question

我正在做一個練習，用戶必須從列表中檢查正確答案，然後按提交以查看他/她做得如何。但是，我的提交按鈕似乎沒有工作。點擊時沒有任何反應。下面是該腳本：

<script> 
//Returns how many correct answers were checked 
$('#submitButton').click(function(){ 
    var arrayScore = [];   
    var tempScore = 0; 
    $('.confirmContainer').remove(); 
    $('.toggleConfirmList:checked').each(function(){ 
     arrayScore.push($(this).val()); 
    }); 
    for(var i=0; i<arrayScore.length; i++) 
    { 
     tempScore = arrayScore[i] + tempScore; 

    } 

    $('feedback').show(); 
    $("#scoreArea").val(tempScore);  

}); 
</script> 

基本上我想禁用輸入容器中，然後計算用戶得分後顯示的反饋。

下面是腳本使用HTML代碼：

<ol class="toggleConfirmList" start="1"> 
         <!-- Start of toggleConfirm question --> 
         <li class="toggleConfirm"> 
          <p class="question">What is your citizenship? 
          </p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="1"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">What is the purpose of your trip</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="1"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">How long will you be staying in Canada?</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="0"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">Where will you be staying?</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="0"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">What is your occupation?</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="0"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">Do you have any family in Canada?</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="1"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">How will you support yourself in Canada?</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="0"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">Do you intend to work or study while you are in Canada?</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="0"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">Have you ever been convicted of a criminal offence?</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="0"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">Do you suffer from any medical conditions?</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="0"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">Have you ever been refused a visa to Canada?</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="0"> 
          </div> 
         </li> 
         <li class="toggleConfirm"> 
          <p class="question">In which country do you reside permanently?</p> 
          <div class="toggleInputContainer"> 
          <input type="checkbox" value="1"> 
          </div> 
         </li>           
        </ol> 

         <div class="confirmContainer"> 
      <input type="button" id="submitButton" value="Submit"> 
      </div> 
         <div class="feedback"> 
            <strong>Answer:</strong>In the exercise you checked <span id="scoreArea">0</span> correct questions 

         </div> 

Answer 1

設定值，跨度元素，你應該使用text()方法而不是val()：

//Returns how many correct answers were checked 
$('#submitButton').click(function(){ 
    var arrayScore = [];   
    var tempScore = 0; 
    $('.confirmContainer').remove(); 
    $(':checkbox:checked').each(function(){ // for selecting checkboxes you can use ":checkbox" selector 
     arrayScore.push(parseInt($(this).val())); // parseInt() the values 
    }); 
    for(var i=0; i<arrayScore.length; i++) 
    { 
     tempScore = arrayScore[i] + tempScore; 

    } 

    $('.feedback').show(); // class selectors should have '.' 
    $("#scoreArea").text(tempScore); // use text() instead of val()  

}); 

http://jsfiddle.net/EWgzq/2/

Answer 2

嘗試在$(document).ready(function(){...});包裝你的代碼。它可能是在DOM準備好之前執行的。

<script> 
//Returns how many correct answers were checked 
$(document).ready(function(){ 
    $('#submitButton').click(function(){ 
     var arrayScore = [];   
     var tempScore = 0; 
     $('.confirmContainer').remove(); 
     $('.toggleConfirmList:checked').each(function(){ 
      arrayScore.push($(this).val()); 
     }); 
     for(var i=0; i<arrayScore.length; i++){ 
      tempScore = arrayScore[i] + tempScore; 
     } 
     $('feedback').show(); 
     $("#scoreArea").val(tempScore);  
    }); 
}); 
</script> 

Answer 3

<script> 
//Returns how many correct answers were checked 
$('#submitButton').click(function(){ 
    var arrayScore = [];   
    var tempScore = 0; 
    $('.confirmContainer').remove(); 
    $('.toggleInputContainer input[type="checkbox"]:checked').each(function(){ 
     arrayScore.push($(this).val()*1); // See the *1 
    }); 
    for(var i=0; i<arrayScore.length; i++) 
    { 
     tempScore = arrayScore[i] + tempScore; 

    } 

    $('div.feedback').show(); // added div. it was missing. 
    $("#scoreArea").html(tempScore); // it should be .html() or .text() not .val(). The .val() works only for form elements 

}); 
</script>