数据表复选框，Header 和每个复选框

Question

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

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

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

Answer 1

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

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

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

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

不管你怎么做，逻辑都非常简单。计数选中的复选框，如果 0 不选中头部，如果计数 == checkboxes.length 则选中头部，对于其他任何东西，将头部复选框保持在中间。

数据表复选框，Header 和每个复选框

Datatables Checkbox, Header and Each Checkboxes

html

javascript

checkbox

jquery

datatables