所以我正在设置一个测验 - 每个问题都有一系列 3 个单选按钮。我想使用 jQuery 验证来确保用户已检查每个问题至少一个答案。
这是我的 HTML
<!-- Question 1 -->
<div class="large-12 questions" id="question-1">
<h5>Question 1</h5>
<label><input type="radio" name="radio-one" value="340,000">Answer</label>
<label><input type="radio" name="radio-one" value="6 million">Answer</label>
<label><input type="radio" name="radio-one" value="11 million" class="correct-answer">Answer</label>
</div>
<!-- Question 2 -->
<div class="large-12 questions" id="question-2">
<h5>Question 2</h5>
<label><input type="radio" name="radio-two" value="1 in 2,000">Answer</label>
<label><input type="radio" name="radio-two" value="1 in 1,400">Answer</label>
<label><input type="radio" name="radio-two" value="1 in 500" class="correct-answer">Answer</label>
</div>
<!-- Question 3 -->
<div class="large-12 questions" id="question-3">
<h5>Question 3</h5>
<label><input type="radio" name="radio-three" value="Every day">Answer</label>
<label><input type="radio" name="radio-three" value="Every 6 hours">Answer</label>
<label><input type="radio" name="radio-three" value="Every 83 minutes" class="correct-answer">Answer</label>
</div>
<!-- Question 4 -->
<div class="large-12 questions" id="question-4">
<h5>Question 4</h5>
<label><input type="radio" name="radio-four" value="2%">Answer</label>
<label><input type="radio" name="radio-four" value="11%">Answer</label>
<label><input type="radio" name="radio-four" value="20%" class="correct-answer">Answer</label>
</div>
<!-- Question 5 -->
<div class="large-12 questions" id="question-5">
<h5>Question 5</h5>
<label><input type="radio" name="radio-five" value="X%">Answer</label>
<label><input type="radio" name="radio-five" value="XX%" class="correct-answer">Answer</label>
<label><input type="radio" name="radio-five" value="X.X%">Answer</label>
</div>
这是我的 main.js 代码
$('.questions').each(function(){
if($('#question input:radio').is(':checked')){
alert('this works');
} else {
alert('you missed one');
}
当我运行此代码时,如果我“未回答”一个问题,我会收到 5 条警报,提示“您错过了一个”。我如何更改我的 JavaScript,以便如果只有一个问题未得到解答,它就会提醒用户?
谢谢。
最佳答案
#question
不存在。它应该是$(this).find('input:radio')
。- 您可以使用
alert('You miss ' + $(this).find('h5').text());
提醒错过的问题编号。
完整代码:
$('.questions').each(function() {
if ($(this).find('input:radio').is(':checked')) {
alert('This works ' + $(this).find('h5').text());
} else {
alert('You missed ' + $(this).find('h5').text());
}
});
Fiddle .
关于javascript - 使用 jQuery 通过循环验证一系列单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25792205/