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

    }

});

“column select-all”使用复选框而不影响表php中的其他列

1 个答案: