javascript - 循环遍历选中的复选框然后显示结果

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

要为 span 元素设置值，您应该使用 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/