“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); 
     }); 

    } 

});