jQuery multiple checkbox filter groups

Question

I am trying to make a list of products filterable using checkboxes and jQuery. I have some code working (thanks to previous answers I've found here).

I want to use CSS classes to show or hide items.

I am trying to filter the items by colour, finish and price and the problem is that my code is currently selecting items using OR between the different filter groups.

I need to be able to filter using OR within each group (e.g colour) but with AND when the checkboxes are in different groups. The way I want to do this is by adding a '.' between the class names, so the item will only match the filter if the colour AND finish AND price css classes are matched.

example #div.dark.smooth.b

I have tried this in Firebug console and I can filter the items I need in this way, but unfortunately I don't know how to achieve this in jQuery. My code is below...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<ul id="colour">
<li><input type="checkbox" name="colour" value="dark"> Dark</li>
<li><input type="checkbox" name="colour" value="medium"> Medium</li>
<li><input type="checkbox" name="colour" value="light"> Light</li>
</ul>

<ul id="finish">
<li><input type="checkbox" name="finish" value="smooth"> Smooth</li>
<li><input type="checkbox" name="finish" value="riven"> Riven</li>
<li><input type="checkbox" name="finish" value="honed"> Honed</li>
</ul>

<ul id="price">
<li><input type="checkbox" name="price" value="a"> Up to £25</li>
<li><input type="checkbox" name="price" value="b"> £25 to £45</li>
<li><input type="checkbox" name="price" value="c"> £45 to £65</li>
<li><input type="checkbox" name="price" value="d"> £65 to £85</li>
<li><input type="checkbox" name="price" value="e"> over £85</li>
</ul>

<div class="dark smooth b">dark smooth b</div>
<div class="medium honed d">medium honed d</div>
<div class="dark smooth d">dark smooth d</div>
<div class="light smooth b">light smooth b</div>
<div class="light riven b">light riven b</div>
<div class="dark riven c">dark riven c</div>
<div class="medium riven a">medium riven a</div>

<script>

$("#colour :checkbox,#finish :checkbox,#price :checkbox").click(function() {

       $("div").hide();

       $("#colour :checkbox:checked").each(function() {
           $("." + $(this).val()).slideDown('slow');
       });
       $("#finish :checkbox:checked").each(function() {
           $("." + $(this).val()).slideDown('slow');
       });
       $("#price :checkbox:checked").each(function() {
           $("." + $(this).val()).slideDown('slow');
       });

    });

</script>
</body>
</html>

Quick idea: instead of using slideDown directly, put the results in an array so you have 3 arrays, one per category (one will be for example [dark, light] and the other [smooth, riven] and so on...). Then create your selectors just by mixing the arrays: dark.smooth, dark.riven, light.smooth, light.riven etc. etc. — Tallmaris
– Tallmaris, Commented Dec 3, 2012 at 11:50
To your script tag please add attribute type="text/javascript" to avoid issues in some situations. — Mark Schultheiss
– Mark Schultheiss, Commented Dec 3, 2012 at 14:08
These really seem to be of type "radio" to me with a tri-state (selected, unselected, none selected) — Mark Schultheiss
– Mark Schultheiss, Commented Dec 3, 2012 at 14:12

Grant Roy · Accepted Answer · 2012-12-31 08:52:48Z

OK - I misunderstood CSS class, try pasting this just below your Checkbox click function and it will give you a pointer on how to do this..

     var ColorArray = [];
        var FinishArray = [];
        var PriceArray = [];

        ColorArray[0] = "Dark";
        ColorArray[1] = "Medium";

        FinishArray[0] = "Smooth";
        FinishArray[1] = "Riven";

        PriceArray[0] = "a";
        PriceArray[1] = "b";
        PriceArray[2] = "c";



        for (c = 0; c < ColorArray.length ; c++) {
            for (f = 0; f < FinishArray.length ; f++) {
                for (p = 0; p < PriceArray.length ; p++) {
                                alert(ColorArray[c] +"."+ FinishArray[f] + "."+PriceArray[p]);
                }
            }
        }

        })

EDIT - the full working solution based on the above method [with 4 select options now] is pasted below.


    <!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <ul id="filter1">
        <li>
            <input type="checkbox" name="filter1" value="dark">
            Dark</li>
        <li>
            <input type="checkbox" name="filter1" value="medium">
            Medium</li>
        <li>
            <input type="checkbox" name="filter1" value="light">
            Light</li>
    </ul>

    <ul id="filter2">
        <li>
            <input type="checkbox" name="filter2" value="sm">
            Small</li>
        <li>
            <input type="checkbox" name="filter2" value="med">
            Medium</li>
        <li>
            <input type="checkbox" name="filter2" value="lge">
            Large</li>
    </ul>

    <ul id="filter3">
        <li>
            <input type="checkbox" name="filter3" value="smooth">
            Smooth</li>
        <li>
            <input type="checkbox" name="filter3" value="riven">
            Riven</li>
        <li>
            <input type="checkbox" name="filter3" value="honed">
            Honed</li>
    </ul>

    <ul id="filter4">
        <li>
            <input type="checkbox" name="filter4" value="a">
            Up to £25</li>
        <li>
            <input type="checkbox" name="filter4" value="b">
            £25 to £45</li>
        <li>
            <input type="checkbox" name="filter4" value="c">
            £45 to £65</li>
        <li>
            <input type="checkbox" name="filter4" value="d">
            £65 to £85</li>
        <li>
            <input type="checkbox" name="filter4" value="e">
            over £85</li>
    </ul>

    <p><a class="showall" href="#" />Clear Filters</a></p>

    <div class="list dark sm smooth b">dark small smooth b</div>
    <div class="list medium lge honed d">medium large honed d</div>
    <div class="list dark med smooth d">dark medium smooth d</div>
    <div class="list light sm smooth b">light small smooth b</div>
    <div class="list light lge riven b">light large riven b</div>
    <div class="list dark sm riven c">dark small riven c</div>
    <div class="list medium med riven a">medium medium riven a</div>
    <div class="list medium lge honed e">medium large honed e</div>

    <div class="NoResults"></div>

    <script>

        $("#filter1 :checkbox,#filter2 :checkbox,#filter3 :checkbox,#filter4 :checkbox").click(function () {

            $("div.list").hide();

            var Filter1Array = [];
            var Filter2Array = [];
            var Filter3Array = [];
            var Filter4Array = [];
            var filter1_Count = 0, filter2_Count = 0, filter3_Count = 0, filter4_Count = 0;

            $("#filter1 :checkbox:checked").each(function () {
                Filter1Array[filter1_Count] = $(this).val();
                filter1_Count++
            });

            $("#filter2 :checkbox:checked").each(function () {
                Filter2Array[filter2_Count] = $(this).val();
                filter2_Count++
            });

            $("#filter3 :checkbox:checked").each(function () {
                Filter3Array[filter3_Count] = $(this).val();
                filter3_Count++
            });

            $("#filter4 :checkbox:checked").each(function () {
                Filter4Array[filter4_Count] = $(this).val();
                filter4_Count++
            });

            var filter1string
            var filter2string
            var filter3string
            var filter4string

            var filter1checked = false
            var filter2checked = false
            var filter3checked = false
            var filter4checked = false

            if (filter1_Count == 0) { filter1_Count = 1; } else { filter1checked = true; }
            if (filter2_Count == 0) { filter2_Count = 1; } else { filter2checked = true; }
            if (filter3_Count == 0) { filter3_Count = 1; } else { filter3checked = true; }
            if (filter4_Count == 0) { filter4_Count = 1; } else { filter4checked = true; }

            for (f1 = 0; f1 < filter1_Count; f1++) {

                if (Filter1Array[f1] != null) { filter1string = '.' + Filter1Array[f1] } else { filter1string = '' }

                for (f2 = 0; f2 < filter2_Count; f2++) {

                    if (Filter2Array[f2] != null) { filter2string = '.' + Filter2Array[f2] } else { filter2string = '' }

                    for (f3 = 0; f3 < filter3_Count; f3++) {

                        if (Filter3Array[f3] != null) { filter3string = '.' + Filter3Array[f3] } else { filter3string = '' }

                        for (f4 = 0; f4 < filter4_Count; f4++) {

                            if (Filter4Array[f4] != null) { filter4string = '.' + Filter4Array[f4] } else { filter4string = '' }

                            var QueryString = filter1string + filter2string + filter3string + filter4string
                            $(QueryString).fadeIn('fast');
                        }
                    }
                }
            }

            if (!filter1checked && !filter2checked && !filter3checked && !filter4checked) {
                $("div.list").fadeIn('fast');
            };

            if ($('div.list:visible').length === 0) {
                $(".NoResults").html("<p class='error'>No products match your filter selections. Please try a different combination.</p>");
            }
            else { $(".NoResults").html(""); }

        });

        $('a.showall').click(function () {
            $("div.list").fadeIn('fast');
            $("#filter1 :checkbox").removeAttr('checked');
            $("#filter2 :checkbox").removeAttr('checked');
            $("#filter3 :checkbox").removeAttr('checked');
            $("#filter4 :checkbox").removeAttr('checked');
            $(".NoResults").html("");
            return false;
        });

    </script>
</body>
</html>

Thanks Grant - that is a perfect solution and easy to maintain.

Karan Punamiya · Accepted Answer · 2012-12-03 13:06:26Z

1

Replace the individual loops with nested loops.

EDIT : You will also have to check for every condition :

   var fc=false;
   var ff=false;
   var fp=false;
   $("#colour :checkbox:checked").each(function() {
        fc=true;
        var color = $(this).val();
        $("#finish :checkbox:checked").each(function() {
            ff=true;
            var finish = $(this).val();
            $("#price :checkbox:checked").each(function() {
                 fp=true;
                 $("." + color + "." + finish + "." + $(this).val()).slideDown('slow');
            });
            if(!fp) {
                 $("." + color + "." + finish).slideDown('slow');
            }
        });
        if(!ff) {
            $("#price :checkbox:checked").each(function() {
                 fp=true;
                 $("." + color + "." + $(this).val()).slideDown('slow');
            });
            if(!fp) {
                 $("." + color).slideDown('slow');
            }
        }
   });
   if(!fc) {
       $("#finish :checkbox:checked").each(function() {
           ff = true;
           var finish = $(this).val();
           $("#price :checkbox:checked").each(function() {
               fp=true;
               $("." + finish + "." + $(this).val()).slideDown('slow');
           });
           if(!fp) {
                 $("." + finish).slideDown('slow');
           }
       });
       if(!ff) {
           $("#price :checkbox:checked").each(function() {
                $("." + $(this).val()).slideDown('slow');
           });
       }
   }

edited Dec 3, 2012 at 13:06

answered Dec 3, 2012 at 11:55

Karan Punamiya

8,9331 gold badge28 silver badges27 bronze badges

1 Comment

John Roy Over a year ago

Thank you for your answer. The first part works but I do not want the user to have to click in all 3 groups. When I add the second and third part, the filters don't seem work as expected.

Grant Roy · Accepted Answer · 2012-12-03 12:20:53Z

0

How about using the .click function for the check boxes to get the associated value of all checked check boxes on the page and build your class string from that i.e. dark.riven.b.light.a - would that work?

answered Dec 3, 2012 at 12:20

Grant Roy

461 gold badge1 silver badge9 bronze badges

1 Comment

John Roy Over a year ago

No because there will only be one class from each group which has a checkbox checked in the class string.

Mark Schultheiss · Accepted Answer · 2012-12-03 23:46:48Z

Since only a single item from a group is/would be selected, radio buttons seem appropriate, the trick is then simply to turn one off if it is on and clicked.

I altered your markup slightly and added code to reflect that ability to "uncheck" a radio button. Working example fiddle: http://jsfiddle.net/MarkSchultheiss/mBAaW/

Radio multi-select

<div id="myRadios">
<ul id="colour">
    <li><label><input type="radio" name="colour" value="dark" >Dark</label></li>
    <li><label><input type="radio" name="colour" value="medium">Medium</label></li>
    <li><label><input type="radio" name="colour" value="light">Light</label></li>
</ul>

<ul id="finish">
<li><input type="radio" name="finish" value="smooth">Smooth</li>
<li><input type="radio" name="finish" value="riven">Riven</li>
<li><input type="radio" name="finish" value="honed">Honed</li>
</ul>

<ul id="price">
<li><input type="radio" name="price" value="a">Up to £25</li>
<li><input type="radio" name="price" value="b">£25 to £45</li>
<li><input type="radio" name="price" value="c">£45 to £65</li>
<li><input type="radio" name="price" value="d">£65 to £85</li>
<li><input type="radio" name="price" value="e">over £85</li>
</ul></div>
<div id="founditems">
<div class="dark smooth b">dark smooth b</div>
<div class="medium honed d">medium honed d</div>
<div class="dark smooth d">dark smooth d</div>
<div class="light smooth b">light smooth b</div>
<div class="light riven b">light riven b</div>
<div class="dark riven c">dark riven c</div>
<div class="medium riven a">medium riven a</div>
</div>
<div id="shower">empty</div>

sample code:

// radio multi-select
var mycolors = [];
var myfinish = [];
var myprice = [];

function checkit(myarray, myclass) {
    var indisun = $.inArray(myclass, myarray);
    return indisun;
}
$("#colour,#finish,#price").on("click", ":radio", function(event) {

    $("#founditems div").hide();
    var mytarget = event.target;
    $("#shower").text("");
    if ($(mytarget).hasClass("iam")) {
        $(mytarget).parents("ul").find("input:radio").removeClass("iam");
        mytarget.checked = false;
    } else {
        $(mytarget).parents("ul").find("input:radio").removeClass("iam");
        $(mytarget).addClass("iam");
    };
    var mycurrent = [];
    var hasColor = $("#colour :radio:checked");
    var hasFinish = $("#finish :radio:checked");
    var hasPrice = $("#price :radio:checked");

    var radios = $("#colour :radio,#finish :radio,#price :radio");
    radios.filter(":checked").each(function() {
        var disun = $(this).val();
        mycurrent.push(disun);
    });
    $("#founditems div").removeClass("iam");

    $('#founditems div').each(function() {
        var adiv = $(this);
        $.each(mycurrent, function() {
            if (adiv.hasClass(this)) {
                adiv.addClass("iam");
            };
        });
    });
    //just to show current selection(s)
    $.each(mycurrent, function() {
        $("#shower").text($("#shower").text() + this);
    });
    var currCol = hasColor.length ? hasColor.val() : false;
    var currFin = hasFinish.length ? hasFinish.val() : false;
    var currPri = hasPrice.length ? hasPrice.val() : false;
    $.each(mycurrent, function() {
        var currVal = this;
        var itsaColor = checkit(mycolors, this);
        var itsaFinish = checkit(myfinish, this);
        var itsaPrice = checkit(myprice, this);
        $('#founditems div').each(function() {
            var adiv = $(this);
            if (adiv.hasClass(currVal)) {
                if (currCol && !adiv.hasClass(currCol) && itsaColor) {
                    adiv.removeClass("iam");
                }
                if (currFin && !adiv.hasClass(currFin) && itsaFinish) {
                    adiv.removeClass("iam");
                };
                if (currPri && !adiv.hasClass(currPri) && itsaPrice) {
                    adiv.removeClass("iam");
                };
            }
        });
    });

    $('#founditems div.iam').slideDown("slow");
});

Thank you Mark for your suggestions. I needed a solution where multiple choices can be made in each group. A fully working example has been provided by Grant Roy, so I have selected that as the best answer.

Collectives™ on Stack Overflow

jQuery multiple checkbox filter groups

4 Answers 4

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related