数据表复选框、标题和每个复选框答案

【问题标题】：Datatables Checkbox, Header and Each Checkboxes数据表复选框、标题和每个复选框
【发布时间】：2015-05-24 16:03:46
【问题描述】：

我正在使用 Datatable 插件，并在表格中使用复选框。我想实现使用 Header 复选框来检查所有单个复选框并检查每个复选框以计数和显示每个复选框。我还想在检查复选框时显示（隐藏和显示）一个 div。

我已经能够实现检查所有，但我也想检查每个（关于标题复选框），即如果全部选中，标题将全部选中，如果未选中，则取消选中标题复选框反之亦然。这是我的代码

$('#selectAllCheck').change(function(e) {
                        var chk = $(this).prop('checked');
                        var currentRows = $('#example tbody tr');
                        $.each(currentRows, function(){
                            $(this).find(':checkbox[name=haschecked]').each(function(){
                                $(this).prop('checked', chk);
                                $(':checkbox[name=haschecked]').prop('checked', chk );
                                $('#inboxcheck')[ chk ? 'show' : 'hide' ](); // Hide and show div
                                $('.checkbox-logo-pane')[ chk ? 'show' : 'hide' ](); // Hide and show div
                                do_count();
                            });
                        });
                      });

                      var do_count =function(){
                          var n = $(':checkbox[name=haschecked]:checked').length;
                          $('.inbox-counter').html( n ); // The checkbox counter
                          return n
                      }
                    });

【问题讨论】：

填充复选框时计数失败？
问题是$('#example tbody tr') 只选择当前页面上的行。显示您的 DataTables 初始化脚本，解决方案将取决于您是在 DataTables 中进行客户端还是服务器端处理。

标签： javascript jquery html checkbox datatables

【解决方案1】：

这似乎是一个普遍的复选框问题。这里已经发布了许多好的答案：

How to implement "select all" check box in HTML?

您还可以使用复选框的一种鲜为人知的状态，称为“中间”。这是另一篇应该对您有所帮助的文章：

https://css-tricks.com/indeterminate-checkboxes/

不管你怎么做，逻辑都很简单。计数选中的复选框，如果 0 不选中 head，如果 count == checkboxes.length 则保持 head 选中，其他任何东西都将 head 复选框留在中间。

【讨论】：