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

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

尝试将代码包装在$(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 2

要将值设置为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/

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>