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

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

• 使用 .prop() 代替 .attr()
• 仅选中/取消选中可见行
• 设置勾选状态为全选状态

尝试

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