「column select-all」使用複選框而不影響表中的其他列php

Question

我想爲我的表格格式創建一個簡單的html select-all複選框。所以當我們點擊相應列列表的頂部時，列中的所有元素都會被選中而不檢查其他列。 這裏是我試過..

<form name="checkn" id="frm1" class="form1" method="post"> 
<table class="table" cellspacing="10" border="1" style="width:100%;"> 
     <thead> 
      <tr> 
       <th>Products List</th> 
       <th> 
       Product Available 
     <input type='checkbox' name='checkall' onclick='checkAll(frm1);'> 
       </th> 
       <th> 
       Description 
     <input type='checkbox' name='checkall' onclick='checkdAll(frm2);'> 
       </th> 
      </tr> 
     </thead> 
    <tbody> 
     <?php 
     //fetch data php code 
      ?> 
     <tr> <td width="20%;"> <h3> <?=$products?> </h3> </td> 
      <td width="20%;"> <input id="frm1" type="checkbox" name="product1" value='<?=$fieldname?>' > Product Available </td> 
      <td width="20%;"> <input id="frm2" type="checkbox" name="product2"> Description </td> 
     </tr> 

      <button type="submit" name="submit" style="position:absolute; bottom:0;"> Submit </button> 

      <script type="text/javascript"> 
       checked = false; 
       function checkAll (frm1) 
       { 
        var aa= document.getElementById('frm1'); if (checked == false) 
        { 
         checked = true 
        } 
        else 
        { 
         checked = false 
        } 
        for (var i =0; i < aa.elements.length; i++) 
        { 
         aa.elements[i].checked = checked; 
        } 
       } 
      </script> 

      <script type="text/javascript"> 
       checked = false; 
       function checkdAll (frm2) 
       { 
        var aa= document.getElementById('frm2'); if (checked == false) 
        { 
         checked = true 
        } 
        else 
        { 
         checked = false 
        } 
        for (var i =0; i < aa.elements.length; i++) 
        { 
         aa.elements[i].checked = checked; 
        } 
       } 
      </script>  

     </tbody> 
    </table> 
    </form> 

請幫我

Answer 1

我認爲你需要找到所有TR長度然後找到TD與輸入。之後，你可以檢查所有。像這樣，這是我的代碼。我希望它能幫助你。

$('#IsSelectAll').on('change', function() { 

    if ($(this).is(':checked')) { 
     $('#tbCustomerList tbody tr:visible').filter(function() { 

      $(this).find('td:eq(1)').children('label').children('input[type=checkbox]').prop('checked', true); 
     }); 
    } 
    else { 
     $('#tbCustomerList tbody tr:visible').filter(function() { 

      $(this).find('td:eq(1)').children('label').children('input[type=checkbox]').prop('checked', false); 
     }); 

    } 

});