JQuery检查/取消选中表php数组中的所有复选框

Question

我使用 php 在数组表 mysql 上显示数据，并使用 jquery 函数选中/取消选中所有复选框。 但问题是我使用jQuery函数来检测和执行基于复选框的类的功能。 我用的是checkbox数组，所以chackbox和类名可以根据mysql中的数据增加。

jQuery 代码：

<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 代码：

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

上述代码的概述。 如果我单击全选，那么所有复选框都将全选。 我希望如果我单击检查第一个表中的所有复选框都是检查。 如果我单击 2，则仅选中表 2 中的所有仅检查复选框。

!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

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

将 id checkall 放在要检查所有复选框的复选框上。在您要检查的复选框上单击应用 chk 类。并在javascript标签中编写上述代码。有时 jQuery 标签不起作用。然后你需要使用document.ready函数/你可以在body的末尾写js代码。这样你的页面加载速度会很快。

Answer 2

更改此代码：

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

Into(不需要增量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

试试这个：

$(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); 

        }
    });


});