title: How to filter elements in jQuery using radio buttons
body: <p>I need to write script for filtering elements.
  I have form with radio buttons and grid of elements. The idea is to show specific elements when i start checking so:
  For examlpe i check PAPER and i see all paper items when i add ROUND i see "paper WITH round shape" and when add SIZE XL so it show me only item which has all these categories "PAPER, ROUND, XL, when there is no results only sorry will be visible.</p>
  
  <p>How i should start with it?? any clues?</p>
  
  <p>I want to use jQuery for this.</p>
  
  <p>Here is link to project: <a href="http://codepen.io/ponciusz/pen/NGpXPB" rel="nofollow">http://codepen.io/ponciusz/pen/NGpXPB</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
        
        &lt;form&gt; 
          &lt;span class="sub-head"&gt;material:&lt;/span&gt;
          &lt;input id="mat-paper" type="radio" name="material" value="paper"&gt;
          &lt;label for="mat-paper"&gt;paper&lt;/label&gt;  
          &lt;input id="mat-plastic" type="radio" name="material" value="plastic"&gt;
          &lt;label for="mat-plastic"&gt;plastic&lt;/label&gt;&lt;br/&gt;
      
          &lt;span class="sub-head"&gt;shape:&lt;/span&gt;
          &lt;input id="shape-round" type="radio" name="shape" value="round"&gt;
          &lt;label for="shape-round"&gt;round&lt;/label&gt;
          &lt;input id="shape-squere" type="radio" name="shape" value="squere"&gt;
          &lt;label for="shape-squere"&gt;squere&lt;/label&gt;  &lt;br/&gt;
      
          &lt;span class="sub-head"&gt;size:&lt;/span&gt;
          &lt;input type="radio" name="size" value="S"&gt;
          &lt;label for="size-s"&gt;S&lt;/label&gt;
          &lt;input type="radio" name="size" value="L"&gt;
          &lt;label for="size-l"&gt;L&lt;/label&gt;
          &lt;input type="radio" name="size" value="M"&gt;
          &lt;label for="size-m"&gt;M&lt;/label&gt;
          &lt;input type="radio" name="size" value="XL"&gt;  
          &lt;label for="size-xl"&gt;XL&lt;/label&gt;&lt;br&gt;&lt;br&gt;
          &lt;input type="reset" value="Reset!"&gt;&lt;br&gt;&lt;br&gt;
        &lt;/form&gt;
        
      &lt;p&gt;TEST QUERIES:&lt;/p&gt;  
      &lt;p&gt;"paper, round, xl" should show only: PRODUCT 6&lt;/p&gt; 
      &lt;p&gt;"plastic, round, xl" should show: PRODUCT 2,3,5 &lt;/p&gt; 
        
        
       &lt;div data-categories='["paper", "plastic", "round", "squere", "s"]' class="item"&gt;PRODUCT 1&lt;/div&gt;
       &lt;div data-categories='["plastic", "round", "squere", "s", "m","l","xl"]' class="item"&gt;PRODUCT 2&lt;/div&gt;
       &lt;div data-categories='["plastic", "round", "squere", "l","xl"]' class="item"&gt;PRODUCT 3&lt;/div&gt;
       &lt;div data-categories='["paper", "round", "s"]' class="item"&gt;PRODUCT 4&lt;/div&gt;
       &lt;div data-categories='["plastic", "round", "xl"]' class="item"&gt;PRODUCT 5&lt;/div&gt;
       &lt;div data-categories='["paper", "round", "xl"]' class="item"&gt;PRODUCT 6&lt;/div&gt;
      
      &lt;div class="item sorry"&gt;SORRY&lt;/div&gt; 
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>