Geek Answers Handbook

Multiple jQuery Filter Groups

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

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

I am trying to filter elements by color, outline and price, and the problem is that my code is currently selecting elements using OR between different filter groups.

I need to be able to filter using OR in each group (e.g. color), but with AND when the checkboxes are in different groups. The way I want to do this is to add '.' between class names, therefore, the element will match the filter only if the color classes AND and AND and the css price match.

example # div.dark.smooth.b

I tried this in the Firebug console and I can filter the elements I need in this way, but, unfortunately, I do not know how to do 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>
+6
source share
4 answers

OK - I misunderstood the CSS class, try pasting this just below your checkbox selector function and it will give you a pointer to 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>
+1
source

Replace individual loops with nested loops.

EDIT: You will also need to check each 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'); }); } }
+1
source

How to use the .click function for checkboxes to get the associated value of all checked checkboxes on the page and build your class line from themes, i.e. dark.riven.b.light.a - will this work?

0
source

Since only one element from the group will be / selected, radio buttons will be selected, the trick is to simply disable it if it is turned on and pressed.

I slightly modified your markup and added code to reflect this “uncheck” ability with the switch. Working example script: http://jsfiddle.net/MarkSchultheiss/mBAaW/

Radio multimedia mode

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

code example:

 // 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"); });
0
source

More articles:


All Articles