title: Refining list based on checkboxes and dropdown selection
body: <p>I've got an unorganized list, populated with items that have several data attributes. </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li data-category="option1" data-green="t" data-blue="f" data-soft="t"&gt;Product 1&lt;/li&gt;
      &lt;li data-category="option1,option3" data-green="f" data-blue="t" data-soft="t"&gt;Product 2&lt;/li&gt;
      &lt;li data-category="option4" data-green="f" data-blue="f" data-soft="f"&gt;Product 3&lt;/li&gt;
      &lt;li data-category="option5" data-green="f" data-blue="t" data-soft="t"&gt;Product 4&lt;/li&gt;
      &lt;li data-category="option1" data-green="t" data-blue="f" data-soft="f"&gt;Product 5&lt;/li&gt;
      &lt;li data-category="option1,option3,option4" data-green="f" data-blue="f" data-soft="t"&gt;Product 6&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'm trying to refine this list based on a couple of selection criteria. These criteria can be chosen via one dropdown selection and multiple true/false checkboxes.</p>
  
  <pre><code>&lt;div id="refine"&gt;
      &lt;select class="category"&gt;
          &lt;option value="showall"&gt;Show all&lt;/option&gt;
          &lt;option value="option1"&gt;Option 1&lt;/option&gt;
          &lt;option value="option2"&gt;Option 2&lt;/option&gt;
          &lt;option value="option3"&gt;Option 3&lt;/option&gt;
          &lt;option value="option4"&gt;Option 4&lt;/option&gt;
          &lt;option value="option5"&gt;Option 5&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="checkbox" value="green"&gt;Green
      &lt;input type="checkbox" value="blue"&gt;blue
      &lt;input type="checkbox" value="soft"&gt;soft
  &lt;/div&gt;
  </code></pre>
  
  <p>The amount of true/false checkboxes is dynamic so more than three can be added in the future.</p>
  
  <p>Also, a product can be available in multiple categories, if so the data-attribute <code>category</code> has multiple values seperated with a comma.</p>
  
  <p>I'm trying to refine the list based on the selected options on top.</p>
  
  <pre><code>$('#refine').on('click','input[type="checkbox"]',function(){
      var inputvalue = $(this).val();
      if($(this).is( ":checked" )){
          $('li[data-'+inputvalue+']').each(function(){
              var attributValue = $(this).attr('data-'+inputvalue+'');
              if(attributValue != 't'){
                  $(this).hide();
              }
          });
      }
      else{
      //Show all (this still needs to check what other options are still selected)
          $('li[data-'+inputvalue+']').show();
      }
  });
  
  $('#refine').on('change','.category', function(){
      var selectedValue = $(this).val();
      $("li[data-category]").each(function(){
          var data_categ = $(this).attr('data-category');
          if (data_categ.indexOf(selectedValue) &lt; 0){
              $(this).hide();
          }else{
              //Show all (this still needs to check what other options are still selected)
              $(this).show();
          }
          if(selectedValue == 'showall'){
              //Show all (this still needs to check what other options are still selected)
              $(this).show();
          }
      });
  });
  </code></pre>
  
  <p>I'm stuck at the part where I want to show the parts I've just hidden. When I select "Show all" in the dropdown, or uncheck a checkbox, all the elements are shown again. Disregarding the other selecting options.</p>
  
  <p>How can I prevent this?</p>
  
  <p>So consider the following case:
  I selected <code>option 3</code> and <code>soft</code>. I changed my mind about the <code>option 3</code> selection and switch this back to <code>Show all</code>. Now I want to show all categories, but only the ones that have <code>soft</code> as a data attribute. But in my code it shows all list items again on <code>Show all</code> disregarding the fact that I still have <code>soft</code> selected.</p>
  
  <p>The same goes for selecting multiple checkboxes and deselectin one.</p>
  
  <p>Can anyone assist on this?</p>
  
  <p><a href="http://jsfiddle.net/x42ey9t7/6/" rel="nofollow"><strong>Fiddle</strong></a></p>