Question

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

这是代码

＆＃13;

<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>

＆＃13;

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

Answer 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>

Answer 2

使用: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>

Answer 3

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

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 4

您应该遍历所有.main元素，然后检查相应的复选框。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

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

＆＃13;

$('#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...
  });
});

＆＃13;

<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>

＆＃13;

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

5 个答案: