Using select all script for filtered table

Question

I am using this (file here) script and i am using check all script in first row for my checkboxes. But first when I filtered for a column, this script selected checkboxes at hidden rows, too.

$(document).ready(function(){
$('#select_all').on('click',function(){
    if(this.checked){
        $('.checkbox').each(function(){
            this.checked = true;
        });
    }else{
         $('.checkbox').each(function(){
            this.checked = false;
        });
    }
});

$('.checkbox').on('click',function(){
    if($('.checkbox:checked').length == $('.checkbox').length){
        $('#select_all').prop('checked',true);
    }else{
        $('#select_all').prop('checked',false);
    }
});
});

Thanks for your helps.

can you share the relevant html code as well? – Sushil Sep 29 '15 at 22:50 — Sushil, Sep 29 '15 at 22:50
@Malk, this works perfectly. Thanks... – zokanzi Sep 29 '15 at 23:05 — zokanzi, Sep 29 '15 at 23:05

score 1 · Answer 1 · answered Sep 29 '15 at 23:09

Use the jQuery :visible selector to leave out the checkboxes that have been filtered. https://api.jquery.com/visible-selector/

$('#select_all').on('click',function(){
    var doCheck = this.checked;
    $('.checkbox:visible').each(function(){
         this.checked = doCheck;
    });
});

score 0 · Accepted Answer · answered Sep 29 '15 at 23:12

Yeah. My new codes:

$(document).ready(function(){
$('#select_all').on('click',function(){
    if(this.checked){
        $('.checkbox:visible').each(function(){
            this.checked = true;
        });
    }else{
         $('.checkbox:visible').each(function(){
            this.checked = false;
        });
    }
});

$('.checkbox:visible').on('click',function(){
    if($('.checkbox:checked').length == $('.checkbox:visible').length){
        $('#select_all').prop('checked',true);
    }else{
        $('#select_all').prop('checked',false);
    }
});
});

Thanks everybody...

Using select all script for filtered table

2 Answers2