Filtering list of items with JQuery checkboxes

Question

I have a set of two different checkboxes; price, and category.

Initially, I want the whole list of results to show, but then as filters are applied, the list changes, and then when filters are removed, or all removed, the list adjusts.

I'm using JQuery to filter the results, but I can't seem to get it so that when there are no checkboxes ticked all products show, and for example if none of the price ones are ticked, but the instrument one in category is, all the instruments show. They are identified by the class tag within the <li> tag, which in my code, is set from a JSON file, but in the JSFiddle, I've just put some example test data.

I've created a JSFiddle, but it doesn't seem to be running, but the exact same code runs on my laptop.

Here's my code:

 $(document).ready(function() { $("#price :checkbox").click(function() { $("li").hide(); $("#price :checkbox:checked").each(function() { $("." + $(this).val()).show(); }); }); $("#category :checkbox").click(function() { $("li").hide(); $("#category :checkbox:checked").each(function() { $("." + $(this).val()).show(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <section id="price"> <p id="fHeader">Price</p> <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5 <br> <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10 <br> <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50 <br> <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100 <br> <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500 <br> <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000 <br> <input type="checkbox" name="price" value="p7" id="p7" />£1000 + <br> </section> <section id="category"> <p id="fHeader">Category</p> <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments <br> <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music <br> <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories <br> </section> <article id="products"> <ul id="productList"> <li class="instruments p5 buffet woodwind clarinet">Buffet B12 Clarinet £400</li> <li class="instruments p7 yamaha woodwind clarinet">Yamaha Clarinet £1700</li> <li class="instruments p6 trevorjames woodwind alto-saxophone">Trevor James Alto Saxophone £700</li> <li class="instruments p3 aulos woodwind recorder">Aulos Recorder £16</li> </ul> </article> 

Any help as to how to approach it from here would be appreciated. Thanks.

Answer 1

I would use data attributes instead of a class. This means you can group your checkbox click into one function. See below:

 $(document).ready(function () { $('#filters :checkbox').click(function () { if ($('input:checkbox:checked').length) { $('li').hide(); $('input:checkbox:checked').each(function () { $('li[data-' + $(this).prop('name') + '*="' + $(this).val() + '"]').show(); }); } else { $("li").show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <article id="filters"> <section id="price"> <p id="fHeader">Price</p> <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5 <br/> <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10 <br/> <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50 <br/> <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100 <br/> <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500 <br/> <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000 <br/> <input type="checkbox" name="price" value="p7" id="p7" />£1000 + <br/> </section> <section id="category"> <p id="fHeader">Category</p> <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments <br/> <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music <br/> <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories <br/> </section> </article> <article id="products"> <ul id="productList"> <li data-price="p5" data-category="instruments">Buffet B12 Clarinet £400</li> <li data-price="p7" data-category="instruments">Yamaha Clarinet £1700</li> <li data-price="p6" data-category="instruments">Trevor James Alto Saxophone £700</li> <li data-price="p3" data-category="instruments">Aulos Recorder £16</li> </ul> </article> 

I also notice you have two id="fHeader" . This is bad, real bad...

---

EDIT FOR CORRECT AND/OR SEARCHING

This is a bit more complex. It creates an array of values and an array of types. We then loop through each LI, to loop through each type, to loop through each value (loop within a loop within a loop, yikes!), with the basis that all types need at least one correct value in order to display the LI.

I would also make sure your values are distinct by putting a ; or something before and after them, because for example "piano" will also match "grand-piano" however ";piano;" will not match ";grand-piano;"

 $('#filters input:checkbox').click(function () { if ($('input:checkbox:checked').length) { var arrSelected = []; // Create Array of Values var arrTypes = []; // Create Array of Types $('input:checkbox:checked').each(function () { if (arrSelected[$(this).prop('name')] == undefined) { arrSelected[$(this).prop('name')] = []; } arrSelected[$(this).prop('name')].push($(this).val()); if ($.inArray($(this).prop('name'), arrTypes) < 0) { arrTypes.push($(this).prop('name')); } }); $('li').each(function() { $(this).hide(); var intKeyCount = 0; for (key in arrTypes) { // AND (check count of matching types) var blnFound = false; for (val in arrSelected[arrTypes[key]]) { // OR (check one of values matches type) if ($(this).attr('data-' + arrTypes[key]).indexOf(arrSelected[arrTypes[key]][val]) > -1) { blnFound = true; break; } } if (blnFound) { intKeyCount++; } } if (intKeyCount > 0 && intKeyCount != arrTypes.length - 1) { $(this).show(); } }); } else { $("li").show(); } }); 

 body { font-family:arial; font-size:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <article id="filters"> <section id="price"> <p id="fHeader">Price</p> <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5 <br/> <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10 <br/> <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50 <br/> <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100 <br/> <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500 <br/> <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000 <br/> <input type="checkbox" name="price" value="p7" id="p7" />£1000 + <br/> </section> <section id="category"> <p id="fHeader">Category</p> <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments <br/> <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music <br/> <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories <br/> </section> </article> <article id="products"> <ul id="productList"> <li data-price="p5" data-category="instruments">Buffet B12 Clarinet £400</li> <li data-price="p7" data-category="instruments">Yamaha Clarinet £1700</li> <li data-price="p6" data-category="instruments">Trevor James Alto Saxophone £700</li> <li data-price="p3" data-category="instruments">Aulos Recorder £16</li> </ul> </article> 

Answer 2

在每个循环之前，显示所有列表项并检查选中了多少个复选框（如果值为0，则什么也不做）。