title: jQuery simple checkbox to hide and show divs (product filtering)
body: <p>I am using jQuery to filter product items on a page (hide and display DIVs) I am using filter as a replacement since PHP $_GET is a bit old fashion we're trying to do this via jQuery. I using filter() and data attribute.</p>
  
  <p>How can I turn off the current selection of checkboxes except the existing item?
  How can I hide the items based off selection and unhide when not?</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;input type="checkbox" id="drama" onClick="filterCategory(this.value)" value="drama" /&gt; Drama&lt;br /&gt;
  &lt;input type="checkbox" id="romance" onClick="filterCategory(this.value)" value="" /&gt; Romance&lt;br /&gt;
  &lt;input type="checkbox" id="horror" onClick="filterCategory(this.value)" value="horror" /&gt; Horror&lt;br /&gt;
  
  &lt;!---------------------&gt;
  &lt;div class="products"&gt;
      &lt;div class="productItem" data-price="250" data-category="horror"&gt;
          Scary Book
          &lt;div class="productItemPrice"&gt;&lt;span&gt;&amp;pound;250&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="productItem" data-price="150" data-category="drama"&gt;
          Drama Poems
          &lt;div class="productItemPrice"&gt;&lt;span&gt;&amp;pound;150&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="productItem" data-price="250" data-category="romance"&gt;
          Love Story
          &lt;div class="productItemPrice"&gt;&lt;span&gt;&amp;pound;250&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="productItem" data-price="241" data-category="horror"&gt;
          Creep Book
          &lt;div class="productItemPrice"&gt;&lt;span&gt;&amp;pound;241&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!---------------------&gt;
  </code></pre>
  
  <h1>jQUERY</h1>
  
  <pre><code>function filterCategory(id) {
      var pid=$(".productItem"); // Which product is it
      var checkid=$('#'+id); // The name of the checkbox form
      var cid=$(pid).data("category"); // The value of the checkbox form
      if ($(checkid).is(':checked')){
          $(pid).hide().filter(function () {var catId=$(this).data("category");return catId;}).show();
      } else {
          $(pid).show().filter(function () {var catId=$(this).data("category");return catId;}).show();
      }
  }
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>.productItem{float:left;padding:5px;margin:5px;border:1px solid #eaeaea}
  body{font-family:verdana}
  </code></pre>
  
  <h1>JSFiddle</h1>
  
  <p><a href="http://jsfiddle.net/RyZy8/" rel="nofollow">http://jsfiddle.net/RyZy8/</a></p>