Menu
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>
502
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
