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

スパン要素に値を設定するには、次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>