Question

所以我正在设置一个测验 - 每个问题都有一系列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，以便如果只有一个问题未得到答复，它会提醒用户？

感谢。

Answer 1

如果从回调中返回each，jQuery false函数将提前停止循环。（这类似于正常循环中的break指令。）如果将错误分支更新为

alert('you missed one');
return false;

然后不会检查其他元素。

Answer 2

#question不存在。它应该是$(this).find('input:radio')。
您可以使用alert('You missed ' + $(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

Answer 3

要一次只获取一条警报消息，请使用以下代码：

$('.questions').each(function(){
    if($(this).find('input[type="radio"]').is(':checked') === false){
        alert($(this).find('h5').text()+' is missed!');
        return false;
    }

}）;

使用jQuery使用循环验证一系列单选按钮

3 个答案: