How to implement Multi checkbox filter in Jquery?

Question

Here Fiddle:http://jsfiddle.net/abhiklpm/ZEDR9/5/

Here I have Implemented Multiple checkbox with filter, But the filter is getting overriden on clicking the second checkbox

EX: If i click Shipping all the shipping will come in below table But at the same time if i click 1GB The intersection of shipping and 1GB should only come but shipping options getting overriden.

like If i click Shipping & 1GB Only (product) Memory1 only should come. Help me out in this

   **Script**

 $("input:checkbox").click(function () {
var showAll = true;
$('tr').not('.first').hide();
$('input[type=checkbox]').each(function () {
    if ($(this)[0].checked) {
        showAll = false;
        var status = $(this).attr('rel');
        var value = $(this).val();            
        $('td.' + status + '[rel="' + value + '"]').parent('tr').show();
    }
});
if(showAll){
    $('tr').show();
}
});

jsfiddle.net/arunpjohny/y29Lp5p1/3 ?

Arun P Johny
– Arun P Johny

2015-03-17 11:11:49 +00:00
Commented Mar 17, 2015 at 11:11 — Arun P Johny
– Arun P Johny, Commented Mar 17, 2015 at 11:11

Arun P Johny · Accepted Answer · 2015-03-17 11:24:44Z

1

Try to create a filter set and loop through the filter and apply them like

var $checks = $("input:checkbox").click(function () {
    var $trs = $('tr').not('.first');

    var filters = {}, flag = false;
    $checks.filter(':checked').each(function () {
        var rel = $(this).attr('rel');
        filters[rel] = filters[rel] || [];
        filters[rel].push('.'+rel+'[rel="'+this.value+'"]');
        flag = true;
    })
    if (flag) {
        $trs.show();
        $.each(filters, function (rel, list) {
            $trs.not(':has('+list.join()+')').hide();
        });
    } else {
        $trs.show();
    }
});

Demo: Fiddle

answered Mar 17, 2015 at 11:24

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement Multi checkbox filter in Jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related