jQuery：检查不同组中是否没有未选中的单选按钮

Question

我正在做一些小测验，里面有很多 radio button 组。像 1 个问题 = 1 个带有多个 radio buttons 的单选按钮组。用户必须在每个组中检查一个radio button。我决定给每组单选按钮一个自己的类，而不是使用循环来检查这些组。出于某种原因 - 代码不起作用。代码如下：

var num = 1;
$("#submit_button").click(function() {
  var alarm = 0;
  $(".input_value" + num).each(function(){
    if(!$(this).is(':checked')) {
      alarm = 1;
    } else {
      num++;
    }
  });

  if(alarm == 1) {
    $("#failure").show(200);
    $("#failure").fadeOut(2500); 
  } else {
    $("#success").show(200);
    $("#success").fadeOut(2500);
  }
});

#success {
	display: none;
	margin-top: 50px
}

#failure {
	display: none;
	margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="rate_input">
    <label><input type="radio" class="input_value input_value1"  name="q1" value=1>1</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=2>2</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=3>3</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=4>4</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=5>5</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=6>6</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=7>7</label>
  </div>
</section>

<section>
  <div class="rate_input">
    <label><input type="radio" class="input_value input_value2"  name="q2" value=1>1</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=2>2</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=3>3</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=4>4</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=5>5</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=6>6</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=7>7</label>
  </div>
</section>

<section>
  <div class="rate_input">
    <label><input type="radio" class="input_value input_value3"  name="q3" value=1>1</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=2>2</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=3>3</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=4>4</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=5>5</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=6>6</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=7>7</label>
  </div>
</section>

<section id="success">
  <p>Great! Thank you!</p>
</section>

<section id="failure">
  <p>You have to select at least 1 radiobutton in each group!</p>
</section>

<section id="submit">
  <input type="submit" name="submit" id="submit_button" value="Send!">
</section>

jsFiddle:https://jsfiddle.net/k3Luw4hx/

Answer 1

您的逻辑似乎有误。检查某些内容时，您需要跳出循环。也就是说，当您找到第一个“已回答”的问题时，您需要跳出该问题并继续。但是，如果您找不到该问题的答案 - 只有在那时您才应该设置警报标志。在您的代码中，它将循环所有匹配的元素并设置alarm = 1，如果它发现任何未选中的选项。

编辑：

我在这里对这个逻辑问题做了一个非常不优雅的解决方案：https://jsfiddle.net/9r7t3rgc/8/ 问题的核心是你需要循环每个问题并决定它是否有答案。您提供的代码没有这样做。

另外，使用.prop 来检查元素的选中状态。

$(".input_value" + num).each(function(){   
    if(!$(this).prop('checked')) {
        alarm = 1;
    } else {
        num++;
    }
})

Answer 2

主要问题是您检查每个单选按钮，这就是您的代码失败的原因。您应该检查类 .input_value1 .input_value2 .input_value3 而不是该类中的每个按钮。

var num = 1;

$("#submit_button").click(function() {
  var total_cb = $(".rate_input").length;
  var alarm = 0;

  for(var key=1;key<=total_cb;key++) {
    if (!$('.input_value'+key).is(':checked')) {
      alarm = 1;
    } 
  }
  
  if (alarm == 1) {
    $("#failure").show(200);
    $("#failure").fadeOut(2500);
  } else {
    $("#success").show(200);
    $("#success").fadeOut(2500);
  }
});

#success {
  display: none;
  margin-top: 50px
}

#failure {
  display: none;
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="rate_input">
    <label><input type="radio" class="input_value input_value1"  name="q1" value=1>1</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=2>2</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=3>3</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=4>4</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=5>5</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=6>6</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=7>7</label>
  </div>
</section>

<section>
  <div class="rate_input">
    <label><input type="radio" class="input_value input_value2"  name="q2" value=1>1</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=2>2</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=3>3</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=4>4</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=5>5</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=6>6</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=7>7</label>
  </div>
</section>

<section>
  <div class="rate_input">
    <label><input type="radio" class="input_value input_value3"  name="q3" value=1>1</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=2>2</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=3>3</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=4>4</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=5>5</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=6>6</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=7>7</label>
  </div>
</section>

<section id="success">
  <p>Great! Thank you!</p>
</section>

<section id="failure">
  <p>You have to select at least 1 radiobutton in each group!</p>
</section>

<section id="submit">
  <input type="submit" name="submit" id="submit_button" value="Send!">
</section>

Answer 3

这里有一个解决方案https://jsfiddle.net/1pycve38/2/

var num = 1;
$("#submit_button").click(function() {
  var alarm = [];

  $('.rate_input').each(function(i){
    alarm[i] = 0;
    $(this).find("input.input_value").each(function(){
      if($(this).is(':checked')) {
        alarm[i] = 1;
      }
    });
  });
       
  if(alarm.indexOf(0) >= 0) {
    $("#failure").show(200);
    $("#failure").fadeOut(2500); 
  } else {
    $("#success").show(200);
    $("#success").fadeOut(2500);
  }
});

#success {
	display: none;
	margin-top: 50px
}


#failure {
	display: none;
	margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="rate_input">
    <label><input type="radio" class="input_value input_value1"  name="q1" value=1>1</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=2>2</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=3>3</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=4>4</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=5>5</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=6>6</label>
    <label><input type="radio" class="input_value input_value1"  name="q1" value=7>7</label>
  </div>
</section>

<section>
  <div class="rate_input">
    <label><input type="radio" class="input_value input_value2"  name="q2" value=1>1</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=2>2</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=3>3</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=4>4</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=5>5</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=6>6</label>
    <label><input type="radio" class="input_value input_value2"  name="q2" value=7>7</label>
  </div>
</section>

<section>
  <div class="rate_input">
    <label><input type="radio" class="input_value input_value3"  name="q3" value=1>1</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=2>2</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=3>3</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=4>4</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=5>5</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=6>6</label>
    <label><input type="radio" class="input_value input_value3"  name="q3" value=7>7</label>
  </div>
</section>

<section id="success">
  <p>Great! Thank you!</p>
</section>

<section id="failure">
  <p>You have to select at least 1 radiobutton in each group!</p>
</section>

<section id="submit">
  <input type="submit" name="submit" id="submit_button" value="Send!">
</section>

循环通过. rate_input，然后在输入中循环。

警报是array，如果检查了答案，则值为 1，否则为 0。

希望这会对你有所帮助。