Question

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

复选框功能

$(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

之外将选择此选项

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

        });

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

3 个答案: