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/" rel="no follow" >http://jsfiddle.net/EWgzq/2/

Answer 2

尝试用 $( document).ready( 函数( {...) } ; 来包扎您的代码。这可能是在 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>

友情链接