1

I have seen many example in this forum for multiple check box validation, but my case is different. i have two set of check box with same name and i want to check at least one in each set.

Here is the code

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

i have tried lot but no luck..any help would be great.

Improve this question
2
  • yeah its applicable for one , but i have two sets like this Commented Oct 17, 2016 at 10:50
  • i want to validate, both the question have to checked Commented Oct 17, 2016 at 10:50

5 Answers 5

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You can use every() to check that every .main has at least one checked checkbox

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

Improve this answer

1 Comment

Stop how? Did you see the snippet ?
0

Use :checked with length to get number of check-boxes checked.

In your case, check $(this).find('input[type="checkbox"]:checked').length in particular set.

$('.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>

Improve this answer

Comments

0

You should loop through all .main elements then check their corresponding checkboxes.

$('#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>

Improve this answer

Comments

0

You can attach a click event to validate button. Than check that for all .main is at least one checkbox input checked:

$('#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>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.