标题和行中带有复选框的Jquery数据表：选择所有复选框不起作用答案

【问题标题】：Jquery datatable with checkbox in header and in row:select all checkbox not working标题和行中带有复选框的Jquery数据表：选择所有复选框不起作用
【发布时间】：2013-07-26 14:00:52
【问题描述】：

我正在使用Jquery Datatable。我希望有一个带有标题的第一列和带有复选框的行，并且应该使用剩余行的复选框切换标题复选框的选择。我有以下实现。

数据表属性

  "aoColumns": [{ "sTitle": "<input type='checkbox' id='selectall' onclick='toggleChecks(this);' ></input>", "mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' ></input>", "bSortable": false },null,null,null,null,null,null]

数据表行

<td><input type="checkbox' class="case"></input></td>

Javascript 函数

  function toggleChecks(obj)
    {
        $('.case').prop('checked', obj.checked);
    }

当我在单页上时，这很好用。但是当我进行分页时，其他页面的复选框仍然处于未选中状态。如何实现这一点以使所有复选框的行为一致。请帮忙。

【问题讨论】：

嗨，你有没有解决这个问题？
为什么不切换 $('#selectall').change(function(){}); 中的复选框。我在几张桌子上都这样做过。

标签： jquery jquery-ui jquery-plugins datatables

【解决方案1】：

我做过类似的事情，

$('#selectall').change(function() {
                        var isSelected = $(this).is(':checked');
                        if(isSelected){
                            $('.case').prop('checked', true);   
                        }else{
                            $('.case').prop('checked', false);
                        }
                    });

文件准备好了。

【讨论】：

函数可以简化为一行：$('.case').prop('checked', $(this).is(':checked'));

【解决方案2】：

伙计们，

有类似的问题需要快速解决。

解决了这个问题，可能对某人有所帮助：

当我动态地为表格提供一些数据时：

oTable1.fnAddData
([
    "<span id='" + any_obj.id + "' style='display:block; width: 10px;'><input class='checkbox' type='checkbox' /></span>",
    title, 
    modified, 
    version
] );

注意复选框的范围。这显然是隐藏的，可以轻松访问。

【讨论】：

【解决方案3】：

您应该使用函数 fnDrawCallback 在页面更改时更新表格。

您可以在此函数中检查标题复选框的值并更新新行复选框。

您还可以为模型中的对象添加一个布尔值，并在您选中或取消选中时更改该值。如果您访问模型，您可以修改所有元素的值，而不仅仅是渲染的元素。然后，当您加载单元格时，您使用复选框表示该真/假。这是最一致的方法，但可能需要更多的工作才能在模型和视图之间获得良好的同步。

【讨论】：