jQuery filter elements based on data attribute
<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>