jQuery：检查不同组中是否没有未经检查的radiobuttons

时间：2017-08-28 15:49:35

标签： jquery validation loops radio-button

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

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/

3 个答案:

答案 0 :(得分：0)

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

修改

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

另外，使用.prop检查元素的已检查状态。 

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

答案 1 :(得分：0)

主要问题是您检查每个单选按钮是否代码失败。您应该检查班级.input_value1 .input_value2 .input_value3，而不是该班级的每个按钮。

＆＃13;
＆＃13; 
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);
  }
});
＆＃13; 
#success {
  display: none;
  margin-top: 50px
}

#failure {
  display: none;
  margin-top: 50px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用解决方案https://jsfiddle.net/1pycve38/2/

＆＃13;
＆＃13; 
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);
  }
});
＆＃13; 
#success {
	display: none;
	margin-top: 50px
}


#failure {
	display: none;
	margin-top: 50px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

循环. rate_input然后在输入中循环。

警报是array，如果选中了答案，那么值将为1，否则为0。

希望这会对你有所帮助。

相关问题
最新问题