Check all checkboxes before submit

Question

Well, I have a form where the user can select an item with a checkbox, the user type how many items he wants to send with an input text, but there are some items that requires a serial number that a checkbox holds.

This is my approach:

<script>
      function checkall()
      {
        var ok=true;
        $('input:checkbox[id^="art"]:checked').each(function() {
          var vals = $(this).val();
          //first attempt
          if (typeof document.getElementById(vals+"existencia") === 'undefined') {
            ok=false;
            return false;
            alert("Error message");
          }else
          if (typeof document.getElementById(vals+"-serie")==='undefined') {
            ok=false
            return false;
            alert("Error message 2");
          }

//second attempt
          if (obj.hasOwnProperty(vals+'existencia')) {
            art = document.getElementById(vals+"existencia").value;
            alert(art);
          }else if (obj.hasOwnProperty(vals+'serial')) {
            sert=document.getElementById(vals+"-serie").value;
            alert(sert);
          }
        });


        if(ok)
        {
          document.getElementById("myform").submit();
        }
      }
      </script>

The script is intended to loop all checked checkboxes and if the input is empty stops and alerts the user and the other stage is when he checks an article with serial number, at least 1 have to checked and also alerts the client

The first attempt, I tried, got passed cause those elements are defined and second attempt throws obj is not defined , maybe I missunderstood the codes and answers I searched, can someone help to achieve my goal or explain me what I did wrong, thank you.

UPDATE:

if ($inicio == 0) {
                    echo "<tr bgcolor= '#f4f4f4' >";
                    $inicio = 1;
                  } else {
                    echo "<tr bgcolor= white>";
                    $inicio = 0;
                  }
                  ?>
                  <td style="width: 10%;text-align: center;">
                    <input type="checkbox" name="art[]" id="art" value="<?php echo $articulo; ?>" /></td>
                    <td width="12%" align="center"><?php echo $diferencia_dias ?> d&iacute;as</td>
                    <td width="8%" style="text-align: center;"><?php echo $articulo; ?></td>

                    <td width="45%"><?php echo $descripcion; ?></td>
                    <?php
                    if($numserie>0){
                      $esto = trim($articulo);
                      $bus_serie = mssql_query("execute serial_madness '$esto','$almacen'");
                      echo "<td style='width:10%;text-align:left;'>";
                      while($res_serie = mssql_fetch_array($bus_serie))
                      {
                        echo '<input type="checkbox" id="'.$articulo.'-serie" name="'.$articulo.'-Serie[]" value="'.$res_serie["ARTICULO"].','.$res_serie["NUMSERIE"].'_'.$valor.'  "> '.$res_serie["NUMSERIE"].' <br>';
                      }
                      echo "</td>";
                    }else{
                      ?><td style="width:10%;text-align:center;"><input type="number" style="text-align:center;width:30px; height:30px;" id="<?php echo $articulo_c; ?>existencia" name="<?php echo
                      $articulo_c; ?>existencia" value="<?php echo (int)$existencias; ?>" min="1" max="<?php echo (int)$existencias; ?>"/></td>
                      <?php
                    } ?>

Answer 1

So, in order to check a checkbox you can just use jquery.

Example: $("#checkboxId").prop('checked', true);

The example above will check the checkbox with id "checkboxId", changing the true to false will uncheck the box;

If you want to check how many or which inputs are checked you can use the .length of the array returned by the jquery selector.

The following will check if all the checkboxes with ids starting with the word "test" are checked:

if($('[id^="test"]:checkbox').length == $('[id^="test"]:checkbox:checked').length) 
{
   // Do stuff here
}

Likewise you can check if nothing is checked if the length is equal to zero.

I prepared a simple example that I think tackles the general issue you are solving here.

https://plnkr.co/edit/2v6x1DXRpAiaKiBFSMz6?p=preview

Notice that when you click 'Submit' in my plunker example all checkboxes will automatically become checked.

If you click the 'Validate' button it will verify that all checkboxes are indeed checked.

You should be able to use my example to create a solution for your specific case.

You may also want to use the .is() jquery function example: $('#' + id).is(":checked")

See the following answer for some similar solutions and explanations: Check if checkbox is checked with jQuery