JQuery to check/uncheck all checkboxes within tables php array

Question

I display data on the array table mysql with php and check/uncheck all the checkbox with jquery functions. but the problem is that I use jQuery functions to detect and perform the function of a class based on the checkbox. I use a checkbox array so chackbox and also the name of the class can be increased according to the data in mysql.

Jquery Code :

<SCRIPT language="javascript">
$(document).ready(function() {
    $('#selectall').click(function(event) {  //on click
        if(this.checked) { // check select status
            $('.PILIH').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox1"              
            });
        }else{
            $('.PILIH').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                      
            });        
        }
    });


});

</SCRIPT>

PHP Code :

<a href="add-komitmen.php" style="text-decoration:none;"><input type="button" value="+Add Komitmen"/></a> <input type="submit" value="Hapus" name="HAPUS" />
<!--<input type="checkbox" id="selectall"/>-->
<br>
<div class="scroll">

<?php 
$sql2 = "Select  master_outlet.ID_OUTLET, master_outlet.NAMA_OUTLET, tb_komitmen.ID_OUTLET
from master_outlet, tb_komitmen
where master_outlet.ID_OUTLET = tb_komitmen.ID_OUTLET group by master_outlet.ID_OUTLET";

$hasil2 = mysqli_query($mysqli, $sql2);

while($data2 = mysqli_fetch_array($hasil2)) {
$yoo = $data2[ID_OUTLET];
$outlet = $data2[NAMA_OUTLET];

//echo $yoo;

echo "<table  border='1' cellspacing='0' width='100%'>
    <thead>
        <tr><th width='9%'>Check <input type='checkbox' id='selectall'/></th>
            <th width='5%'>No.</th>

            <th>$outlet</th>
            <th width='17%'>Komitmen</th>
           <!-- <th>Date</th>-->
            <th width='10%'>Detail</th>

        </tr>
    </thead>
    <tbody>";

$sql = "Select AA.* from(SELECT tb_komitmen.ID_KOMITMEN AS ID, 
               master_outlet.NAMA_OUTLET AS NAMA_OUTLET, 
               master_produk.NAMA_PRODUK AS NAMA_PRODUK
          ,tb_komitmen.KOMITMEN AS KOMITMEN, master_outlet.ID_OUTLET AS ID_OUTLET

               FROM tb_komitmen, master_outlet, master_produk
               WHERE master_outlet.ID_OUTLET = tb_komitmen.ID_OUTLET
               AND   master_produk.ID_PRODUK = tb_komitmen.ID_PRODUK) as AA where ID_OUTLET = '$yoo'";

$hasil = mysqli_query($mysqli, $sql);
$num_results = mysqli_num_rows($shasil);
if($hasil)
    {
        if(mysqli_num_rows($hasil)!=0) {

$no = 1; 
while($data = mysqli_fetch_array($hasil)) {
//$min = $data[KOMITMEN];

 echo "<tr>";
  echo "<td align='center'><input type='checkbox' value='$data[ID]' name='PILIH[]' class='PILIH' ></td>";
   echo "<td align='center'>$no</td>";
   //echo "<td align='center'>$data[NAMA_OUTLET]</td>";
   echo "<td align='center'>$data[NAMA_PRODUK]</td>";
   echo "<td align='center'>$data[KOMITMEN]</td>";
   //echo "<td align='center'>$data[TGL]</td>";
   echo "<td align='center'><a href='detail-stc-otl-produk.php?ID=$data[ID]' style='text-decoration:none;'><input type='button' value='detail'></a></td>";   
 echo "</tr> ";
  $no++; 
}
}
 echo "<br> ";
}
}

echo " </tbody>      
</table>" ;
?>

</div>

</form>

an overview of the above code. if i click check All then all the checkboxes will check all. I wish if I click check all the checkboxes in the first table are checks. and if I click 2 then check all the checks only checkbox in table 2 only.

! an overview of the above code. if i click check All then all the checkboxes will check all. I wish if I click check all the checkboxes in the first table are checks. and if I click 2 then check all the checks only checkbox in table 2 only.

Answer 1

Try this:

$(document).ready(function() {
    $('#selectall').click(function(event) {  //on click
        if(this.checked) { // check select status
            $(this).parent("table").find("input[type=checkbox]").attr("checked",true); 
        }else{
           $(this).parent("table").find("input[type=checkbox]").attr("checked",false); 

        }
    });


});

Answer 2

Change this code :

<input type='checkbox' id='selectall'/>

Into(no need for increment id)

<input type='checkbox' class='selectall'/>

JS

$(document).ready(function() { 
   $(document).on('click','.selectall', function(event) {  // better use event delegation if you add the data dynamically

    if(this.checked) { 
        $(this).parent('table').find('.PILIH').prop('checked', true);            
    }else{
        $(this).parent('table').find('.PILIH').prop('checked', false);       
    }
   });

});

Answer 3

$('#allCheck').click(function(event) {
          if (this.checked) {
              $('.chk').each(function() {
                  this.checked=true;
              });
          } else {
              $('.chk').each(function(){
                  this.checked=false;
              });
          }
      });

place id checkall on that checkbox from which you want to check all the checkboxes. on which checkbox you want to check on click apply chk class. And write above code in javascript tags. Sometimes jQuery tags not work. Then you have need to use document.ready function/you can write js code at the end of body. In this way your page load speed will be fast.