javascript - 使用 jQuery 通过循环验证一系列单选按钮

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

• #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 .