如何验证多个复选框以检查 jquery/javascript 中的至少一个？答案

【问题标题】：How to validate multiple checkbox to check atleast one in jquery/javascript?如何验证多个复选框以检查 jquery/javascript 中的至少一个？
【发布时间】：2016-10-17 10:47:16
【问题描述】：

我在这个论坛中看到了很多关于多个复选框验证的示例，但我的情况不同。我有两组具有相同名称的复选框，我想在每组中至少检查一个。

这里是代码

<div class=main>
  question one here *******?
  <input type="checkbox" name="option[]" />checkbox 1
  <input type="checkbox" name="option[]" />checkbox 2
  <input type="checkbox" name="option[]" />checkbox 3
  <input type="checkbox" name="option[]" />checkbox 4
</div>

<div class=main>
  question two here *******?
  <input type="checkbox" name="option[]" />checkbox 1
  <input type="checkbox" name="option[]" />checkbox 2
  <input type="checkbox" name="option[]" />checkbox 3
  <input type="checkbox" name="option[]" />checkbox 4
</div>

我尝试了很多，但没有运气..任何帮助都会很棒。

【问题讨论】：

是的，它适用于一个，但我有两套这样的
我想验证，两个问题都必须检查

标签： javascript php jquery checkbox

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){

});
 function JXX_Check()
{
$('.main').each(function(){
if ($(this).find('input[type="checkbox"]:checked').length <=0)
{
 alert('atleast select one checkbox in div with index '+ $(this).index()   );
}
});

}
</script>
</head>
<body>
<input type='button' value='check' onClick='JXX_Check();'/>
<div class=main>
<br>
 question one here *******? 

 <input type="checkbox" name="option" value="Bike1"/>checkbox 1<br>
 <input type="checkbox" name="option" value="Bike2"/>checkbox 2<br>
 <input type="checkbox" name="option" value="Bike3"/>checkbox 3<br>
        </div>

      <div class=main>
<br>
 question two here *******? 
 <input type="checkbox" name="option" value="Bike1"/>checkbox 1<br>
 <input type="checkbox" name="option" value="Bike2"/>checkbox 2<br>
 <input type="checkbox" name="option" value="Bike3"/>checkbox 3<br>
        </div>
</body>
</html>

【讨论】：

【解决方案2】：

您可以使用every() 来检查每个.main 是否至少有一个选中的复选框

var valid = $('.main').toArray().every(function(item) {
    return $(item).find('input[type="checkbox"]:checked').length >= 1;
});

$('#test').on('click', function() {
    var valid = $('.main').toArray().every(function(item) {
        return $(item).find('input[type="checkbox"]:checked').length >= 1;
    });
    alert(valid)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=main>
    question one here *******?
    <input type="checkbox" name="option[]">checkbox 1
    <input type="checkbox" name="option[]"> checkbox 2
    <input type="checkbox" name="option[]">checkbox 3
    <input type="checkbox" name="option[]"> checkbox 4
</div>

<div class=main>
    question two here *******?
    <input type="checkbox" name="option[]">checkbox 1
    <input type="checkbox" name="option[]"> checkbox 2
    <input type="checkbox" name="option[]">checkbox 3
    <input type="checkbox" name="option[]"> checkbox 4
</div>
<br/><br/>
<input type="button" value="Validate" id="test">

【讨论】：

停止怎么办？你看到sn-p了吗？

【解决方案3】：

使用带有长度的:checked 来获取选中的复选框数。

在您的情况下，请特别检查$(this).find('input[type="checkbox"]:checked').length。

$('.main').each(function(){
 console.log($(this).find('input[type="checkbox"]:checked').length);
});

$('#checkValid').click(function(){
 $('.main').each(function(){
   if($(this).find('input[type="checkbox"]:checked').length == 0)
    {
      alert("please select at-least one checkbox");  
    }
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
 question one here *******? 
<input type="checkbox" name="option[]">checkbox 1
  <input type="checkbox" name="option[]"> checkbox 2
    <input type="checkbox" name="option[]">checkbox 3
      <input type="checkbox" name="option[]"> checkbox 4
        </div>
      
      <div class="main">
 question two here *******? 
<input type="checkbox" name="option[]">checkbox 1
  <input type="checkbox" name="option[]"> checkbox 2
    <input type="checkbox" name="option[]">checkbox 3
      <input type="checkbox" name="option[]"> checkbox 4
        </div>

<button id="checkValid">Check valid</button>

【讨论】：

【解决方案4】：

您应该遍历所有 .main 元素，然后选中它们对应的复选框。

$('#check').click(function() {
  $('.main').each(function() {
    if ($(this).find(':checkbox:checked').length == 0)
      alert($(this).text() + ': no option was checked');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=main>
  question one here *******?
  <input type="checkbox" name="option[]" />checkbox 1
  <input type="checkbox" name="option[]" />checkbox 2
  <input type="checkbox" name="option[]" />checkbox 3
  <input type="checkbox" name="option[]" />checkbox 4
</div>

<div class=main>
  question two here *******?
  <input type="checkbox" name="option[]" />checkbox 1
  <input type="checkbox" name="option[]" />checkbox 2
  <input type="checkbox" name="option[]" />checkbox 3
  <input type="checkbox" name="option[]" />checkbox 4
</div>

<button id="check">Check</button>

【讨论】：

【解决方案5】：

您可以附加click 事件来验证按钮。比检查所有.main 是否至少检查了一个复选框输入：

$('#validate').on('click', function() {  
  $('.main').each(function() {
    if (!$(this).find('input:checkbox:checked').length) {
      alert('You have to check at least one answer by question.');
      return false;
    }

    // Your code...
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class=main>
    question one here *******?
    <input type="checkbox" name="option[]">checkbox 1
    <input type="checkbox" name="option[]"> checkbox 2
    <input type="checkbox" name="option[]">checkbox 3
    <input type="checkbox" name="option[]"> checkbox 4
</div>

<div class=main>
    question two here *******?
    <input type="checkbox" name="option[]">checkbox 1
    <input type="checkbox" name="option[]"> checkbox 2
    <input type="checkbox" name="option[]">checkbox 3
    <input type="checkbox" name="option[]"> checkbox 4
</div>

<button id="validate">Validate</button>

【讨论】：