全部选中/全部取消-复选框和表格数据

Question

我目前正在使用Footables显示表格数据。 每行都有一个复选框。 有一个主复选框可以全选。 我遇到了一些困难。 该表有一个过滤器。 当我应用过滤器并尝试检查该过滤器中的所有复选框时，它将无法正常工作。 另外，由于我能够一次选中所有复选框，因此可以取消选中所有复选框吗？ 例

复选框功能

$(document).on('change','input[name="check_all"]',function() {
        $("input[type=checkbox]").attr('checked', true);
    });
    $(document).on('change','select',function() {
        $('input[type=checkbox]').attr('checked', false);
    });

表格过滤器

$(function () {
        $('table').footable().bind({
            'footable_filtering': function (e) {
                var selected = $('.filter-status').find(':selected').text();
                if (selected && selected.length > 0) {
                    e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
                    e.clear = !e.filter;
                }
            },
            'footable_filtered': function() {
                var count = $('table.demo tbody tr:not(.footable-filtered)').length;
                $('.row-count').html(count + ' rows found');
            }
        });

        $('.clear-filter').click(function (e) {
            e.preventDefault();
            $('.filter-status').val('');
            $('table.demo').trigger('footable_clear_filter');
            $('.row-count').html('');
        });

        $('.filter-status').change(function (e) {
            e.preventDefault();
            $('table.demo').data('footable-filter').filter( $('#filter').val() );
        });
    });

Answer 1

您仍选中所有框的原因是，您在jquery中没有正确设置过滤器。 更改为此：

$(document).on('change', 'input[name="check_all"]', function () {
          $("table.demo tbody tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked);
            alert($("input:checkbox:checked").length);
        });

Answer 2

• 使用.prop（）而不是.attr（）
• 仅选中/取消选中可见行
• 将选中状态设置为“选择所有复选框”状态

尝试

$(document).on('change', 'input[name="check_all"]', function () {
    $(".footable tr:visible input[type=checkbox]").prop('checked', this.checked);
});

Answer 3

尝试使用not选择器的方法，它将选择除.footable -filtered类之外的.footable -filtered

 $(document).on('change', 'input[name="check_all"]', function () {
            $(".footable tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked);

        });