title: Use checkboxes to filter Elements with JSON
body: <p>Im trying to figure out how to filter elements based on JSON data and match it with the elements attribute. </p>
  
  <p>Not sure how to do this with multiple parameters- with one I would do something like this to match them: </p>
  
  <pre><code>$('li.grid-item').filter(function (i, e) {
      return productList.indexOf($(this).attr('data-partnumber')) &gt; -1
  }).show();
  </code></pre>
  
  <p>Whats the best way to do this? </p>
  
  <p><a href="https://codepen.io/Jerryskate/pen/bGdbErZ" rel="nofollow noreferrer">Codepen:</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;input id="box1" type="checkbox" /&gt;
    &lt;label for="box1"&gt;Group 1&lt;/label&gt;
    &lt;br&gt;
    &lt;input id="box2" type="checkbox" /&gt;
    &lt;label for="box2"&gt;Group 2&lt;/label&gt;
      &lt;br&gt;
    &lt;input id="box3" type="checkbox" /&gt;
    &lt;label for="box3"&gt;Group 3&lt;/label&gt;
  &lt;/div&gt;
  
  
  &lt;ul class="grid"&gt;
  &lt;li class="grid-item" style="display:none"&gt;1&lt;span data-partnumber="MIG455239" style=""&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li class="grid-item" style="display:none"&gt;2&lt;span data-partnumber="MIG455239" style=""&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li class="grid-item" style="display:none"&gt;3&lt;span data-partnumber="MIG455239" style=""&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var productList= [ 
     { 
        mig:"MIG1812067",
        group:"one",
     },
     { 
        mig:"MIG1812076",
         group:"two",
     },
     { 
        mig:"MIG1812136",
     group:"three","
     }
  
  ];
  
  </code></pre>