“column select-all” using checkbox without affecting other column in a table php

Question

I wanted to create a simple html select-all checkbox for my table form. So when we click on top of corresponding column list all the elements in the column are selected without checking other columns. Here is what i tried..

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

Please help me

Answer 1

I think you need to find all tr length then find td with input. after that, you can check all. Like this here is my code. I hope it helps you.

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

    }

});