Require all cheboxes to be selected

Question

So, I have a box with checkboxes that you must select before submitting. The problem is that this is not a constant number of flags, because it depends on the number of values ​​retrieved from the database that need to be checked.

Basically, the number of flags ranges from 1 to 9.

I submit the values ​​using ajax, so I did not list the checkbale elements in the form, rather, they are in the list. Something like that

Unit 1: <input type="checkbox" name="unit[]" value="1"/>
Unit 2: <input type="checkbox" name="unit[]" value="2"/>
Unit 3: <input type="checkbox" name="unit[]" value="3"/>
Unit 4: <input type="checkbox" name="unit[]" value="4"/>

<input type="submit" value="register units"/>

Question: how can I guarantee that every time all flags will be checked before sending.

Answer 1

like this:

if($('input[type="checkbox"]:checked').length == $('input[type="checkbox"]').length){
  //all checkboxes are checked.
}

name $('input[name="unit[]"]' $('input[name="unit[]"]:checked')

Answer 2

-

     <form name="myForm" action="targetpage.asp" onsubmit="return validateForm();" method="post">  
         Unit 1: <input type="checkbox" name="unit" value="1" />  
         Unit 2: <input type="checkbox" name="unit" value="2" />  
         Unit 3: <input type="checkbox" name="unit" value="3" />  
         Unit 4: <input type="checkbox" name="unit" value="4" />  
         <input type="submit" value="submit" id="XISubmit" />  
     </form>  



 <script>  
     function validateForm() {  
         if (validateCheckbox(document.forms["myForm"]["unit"])) {  
             alert('All good!');  
             return false;  
         }  
         else {  
             alert('Please select all checkboxes.');  
             return false;  
         }  
     }  

     function validateCheckbox(chk) {  
         for (i = 0; i < chk.length; ++i) {  
             if (!chk[i].checked) return false;  
         }  
         return true;  
     }  
 </script>  

Answer 3

Try something like this

if($('form input:checked').length == $('form input:checkbox').length){
//submit
}

Answer 4

in the send handler, check the length of the checked flags if it is more than 0, then show the error message and prevent the default action

if($('input[name="unit[]"]').not(':checked').length){
    alert();
    return;
}

Answer 5

    <input type="checkbox" name="unit[]" value="1"/>
     <input type="checkbox" name="unit[]" value="2"/>
     <input type="checkbox" name="unit[]" value="3"/>
    <input type="checkbox" name="unit[]" value="4"/>
 <input type="button" id="buttonsubmit" />

Here is your html

Here is jQuery

$('#buttonsubmit').click(function(){
$('.checkme').each(function(){
  var aa="all"
  if(!$(this).is(':checked'))
  {
  aa='notchecked';

  }

  if(aa=='notchecked')
                   {

                   alert('all not checked');
                   }
                   else

                     {
                       alert('all checked');

                     }

});
});

Checkout this demo Click here