Check all/uncheck all - checkboxes and tabular data

Question

I am currently using Footables to display tabular data. Each row has a checkbox. There is one master checkbox that selects all. I am running into some difficulties. The table has a filter. When I apply the filter and try to check all checkboxes within that filter it wont work. Also, since I am able to check all checkboxes at once is there away to uncheck all checkboxes? EXAMPLE

Checkbox function

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

table filter

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

The reason you are still checking all boxes is because you have not set the filter properly in you jquery. Change to this:

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

• use .prop() instead of .attr()
• Check/uncheck only the visible rows
• set the checked status to the select all checkboxes state

Try

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

Answer 3

try this one with not selecter which will select except the class .footable -filtered

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

        });