选中和取消选中动态网格中的所有复选框答案

【问题标题】：check and uncheck all checkboxes in dynamic grid选中和取消选中动态网格中的所有复选框
【发布时间】：2014-05-07 08:03:06
【问题描述】：

我有一个动态数据网格（数据表），最初显示 10 行，一列中有复选框。表格底部有一个按钮，当至少一个框被选中时，该按钮将被启用。现在，当我单击一个复选框并在网格中显示下 10 条记录并返回到以前的记录时，该按钮被禁用。

<div class="table-responsive datagrid">




<table cellpadding="0" cellspacing="0" border="0" class="table voa-grid" id="example">
<thead class="thead">
    <tr>

        <th>Given Names</th>
        <th>Family Name</th>
        <th>gender</th>
        <th>Nationality</th>
        <th>Date of Birth</th>
        <th>Travel Doc No</th>
        <th>TD Issuing State</th>
        <th>Passport Issue Date</th>
        <th>Payment Transaction No</th>
        <th>Visa Application No</th>
        <th>Visa Issued</th>
        <th>Visa Issue Date</th>
    </tr>
</thead>
<tbody>
    <tr class="gradeX">
        <td>Steven</td>
        <td>Gerrard</td>
        <td>Male</td>
        <td class="center">British</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>England</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1001</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>
    <tr class="gradeX">
        <td>Fernando</td>
        <td>Torres</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>D90</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1002</td>
        <td>VA1001</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>
    <tr class="gradeX">
        <td>Lukas</td>
        <td>Poldoski</td>
        <td>Male</td>
        <td class="center">German</td>
        <td>04 Feb 2006</td>
        <td>B9083</td>
        <td>Germany</td>
        <td>04 Feb 2006</td>
        <td>PAY1003</td>
        <td>VA1006</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>
    <tr class="gradeX">
        <td>Zlatan</td>
        <td>Ibrahimovic</td>
        <td>Male</td>
        <td class="center">Swedish</td>
        <td>04 Feb 2006</td>
        <td>D90838383</td>
        <td>Sweden</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1008</td>
        <td><input type="checkbox" value="" name=""></td>
<td></td>
    </tr>
    <tr class="gradeX">
        <td>Robin</td>
        <td>Van Persie</td>
        <td>Male</td>
        <td class="center">Dutch</td>
        <td>04 Feb 2006</td>
        <td>A90838383</td>
        <td>Netherlands</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1002</td>
        <td><input type="checkbox" value="" name=""></td>
     <td></td>
    </tr>

    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>



    <tr class="gradeX">
        <td>Xabi</td>
        <td>Alonso</td>
        <td>Male</td>
        <td class="center">Spanish</td>
        <td>04 Feb 2006</td>
        <td>C90838383</td>
        <td>Spain</td>
        <td>04 Feb 2006</td>
        <td>PAY1001</td>
        <td>VA1005</td>
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
    </tr>












</tbody>
<tfoot>

</tfoot>
</table>



</div>











  $(".voa-grid").delegate("input[type='checkbox']","click", function(){

      $(this).each(function(index, element) {

            if($(this).prop("checked") == true){
                $(this).addClass( "voa-tr-checked" );
                $(this).attr('checked', 'checked');
                var vor_checked_one = $(".voa-grid").find(".voa-tr-   checked").size();

                if(vor_checked_one > 0){
                $(".update").prop("disabled", false);
                }
            }

            else if($(this).prop("checked") == false){
                $(this).removeClass( "voa-tr-checked" );
                $(this).removeAttr('checked');
                var vor_checked_two = $(".voa-grid").find(".voa-tr-checked").size();

                if(vor_checked_two == 0){
                $(".update").prop("disabled", true);
                }
            }  
        });

  });

});

【问题讨论】：

您只需要一个函数来选中和取消选中所有复选框？如果您只想这样，您可以简单地添加一个复选框，例如在标题中并在其他复选框中添加一个类并创建一个要检查的功能 - 单击标题复选框时取消选中。
这是你想要的jsfiddle.net/Animeshjain/PJ67B 吗？

标签： jquery checkbox

【解决方案1】：

我假设您使用的是Datatables.net

如果是这样，您需要使用他们的 API 来实现这一点。由于 html 上的原始 jQuery 使用不会与状态数据表同步。 Datatables 管理自己的状态并使用它保存的状态和数据重新呈现表。如果你只是改变 html，datatable 永远不会知道你做了什么。

您可以使用此example（不带复选框，但具有完整的行选择），您可以在其中选择一行，如果您更改页面，然后返回，该行仍然被选中。

您可能会搜索tr.selected，如果存在，则该按钮将被启用

【讨论】：

【解决方案2】：

我无法理解您的问题，但我认为底部的复选框应该是检查其他复选框是否正确。在那种情况下，我想我可能发现了问题：

    else if($(this).prop("checked") == false){
            $(this).removeClass( "voa-tr-checked" );
            $(this).removeAttr('checked');

在这段代码中，当您取消选中任何其他按钮时，听起来您是在告诉底部复选框变为未选中状态。我可能弄错了棒子的一端，但是如果要在其他任何一个或所有其他复选框被选中时选中底部复选框，那么当其他一个复选框未选中时，它肯定不应该被选中。

希望我说的是有道理的，但完全有可能我不知道我在说什么，所以如果是这样的话，请提前道歉..

【讨论】：