我正在做一个练习，用户必须从列表中检查正确答案，然后按提交来查看他/她的表现如何。但是，我的提交按钮似乎不起作用。单击时没有任何反应。这是脚本:
<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>
最佳答案
要为 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()
});
关于javascript - 循环遍历选中的复选框然后显示结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10722167/