title: jQuery filter elements based on data attribute
body: <p>I have a set of checkboxes and select list that are being used to filter elements.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div id="users"&gt;
    &lt;input name="user" type="checkbox" value="1"&gt;
    John
    &lt;input name="user" type="checkbox" value="2"&gt;
    Mike
    &lt;input name="user" type="checkbox" value="3"&gt;
    Peter &lt;/div&gt;
  
  &lt;select name="products"&gt;
    &lt;option value="4"&gt;Product 1&lt;/option&gt;
    &lt;option value="5"&gt;Product 2&lt;/option&gt;
    &lt;option value="6"&gt;Product 3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;ul id="items"&gt;
    &lt;li data-filter="1"&gt;Item 1&lt;/li&gt;
    &lt;li data-filter="2"&gt;Item 2&lt;/li&gt;
    &lt;li data-filter="1"&gt;Item 3&lt;/li&gt;
    &lt;li data-filter="3"&gt;Item 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and here is javascript:</p>
  
  <pre><code>$('select[name=products]').change(function() {
      var filter = $(this).val();
      filterList(filter);
  });
  
  //News filter function
  function filterList(value) {
      var list = $("#items li");
      $(list).fadeOut("fast");
      if (value == "all") {
          $("#items").find("li").each(function () {
              $(this).delay(200).slideDown("fast");
          });
      } else {
          $("#items").find("li[data-filter*=" + value + "]").each(function () {
              $(this).delay(200).slideDown("fast");
          });
      }
  }
  </code></pre>
  
  <p>My problem is now to include checkboxes as well as part of filtering options, but I'm not sure which way to go. Do I coma separate data-filter values like: data-filter="1,3" where 1 is product, and 3 is user, or add new data attribute entirely?</p>