循环选中复选框，然后显示结果

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>