title: Filtering list of items with JQuery checkboxes
body: <p>I have a set of two different checkboxes; price, and category.</p>
  
  <p>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.</p>
  
  <p>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 <code>&lt;li&gt;</code> tag, which in my code, is set from a JSON file, but in the JSFiddle, I've just put some example test data.</p>
  
  <p>I've created a JSFiddle, but it doesn't seem to be running, but the exact same code runs on my laptop. </p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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();
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section id="price"&gt;
    &lt;p id="fHeader"&gt;Price&lt;/p&gt;
    &lt;input type="checkbox" name="price" value="p1" id="p1" /&gt;£0 - £5
    &lt;br&gt;
    &lt;input type="checkbox" name="price" value="p2" id="p2" /&gt;£5 - £10
    &lt;br&gt;
    &lt;input type="checkbox" name="price" value="p3" id="p3" /&gt;£10 - £50
    &lt;br&gt;
    &lt;input type="checkbox" name="price" value="p4" id="p4" /&gt;£50 - £100
    &lt;br&gt;
    &lt;input type="checkbox" name="price" value="p5" id="p5" /&gt;£100 - £500
    &lt;br&gt;
    &lt;input type="checkbox" name="price" value="p6" id="p6" /&gt;£500 - £1000
    &lt;br&gt;
    &lt;input type="checkbox" name="price" value="p7" id="p7" /&gt;£1000 +
    &lt;br&gt;
  &lt;/section&gt;
  
  &lt;section id="category"&gt;
    &lt;p id="fHeader"&gt;Category&lt;/p&gt;
    &lt;input type="checkbox" name="category" value="instruments" id="instruments" /&gt;Instruments
    &lt;br&gt;
    &lt;input type="checkbox" name="category" value="sheetmusic" id="sheet-music" /&gt;Sheet Music
    &lt;br&gt;
    &lt;input type="checkbox" name="category" value="accessories" id="accessories" /&gt;Accessories
    &lt;br&gt;
  &lt;/section&gt;
  
  &lt;article id="products"&gt;
    &lt;ul id="productList"&gt;
      &lt;li class="instruments p5 buffet woodwind clarinet"&gt;Buffet B12 Clarinet £400&lt;/li&gt;
      &lt;li class="instruments p7 yamaha woodwind clarinet"&gt;Yamaha Clarinet £1700&lt;/li&gt;
      &lt;li class="instruments p6 trevorjames woodwind alto-saxophone"&gt;Trevor James Alto Saxophone £700&lt;/li&gt;
      &lt;li class="instruments p3 aulos woodwind recorder"&gt;Aulos Recorder £16&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help as to how to approach it from here would be appreciated. Thanks.</p>