Rewrite code so that filter is mutually inclusive rather than exclusive jquery/js
<p>I'd like to make multiple filters inclusive not exclusive. Please see this demo: <a href="http://codeblog.cz/pitch/portfolio_thumbnails_a.html" rel="nofollow">http://codeblog.cz/pitch/portfolio_thumbnails_a.html</a></p>

<p>Look at the sidebar, there is a cool filter, you click radio button and only items with <code>data-category="filter_name,second_filter_name"</code> remain.</p>

<p>I'd like to create several filters of this sort.</p>

<p>Something like in the mockup: <img src="http://i.stack.imgur.com/3TvDi.png" alt="enter image description here"></p>

<p>I'm thinking several ways to do this. First I tried to make radio into checkboxes, but it didn't work. Checkboxes work same way as radio buttons, obviously jquery is working here...</p>

<p>I believe this part of page.js is responsible for filter:</p>

<pre><code>/**
 * Toggle items by category(attribute data-category, multiple categories must separed by comma)
 *
 * @param {String|Object} items    Items to filter
 * @param {String}        category Category
 */
utils.filter = function(items, category) {
    var $items = $(items);
    if (category == 'all')
        $items.show();
    else
        $items.each(function() {
            var $item = $(this);
            var categories = $item.attr('data-category').split(',');
            $item.toggle($.inArray(category, categories) != -1);
        });
};
</code></pre>

<p>To be more clear what I want to achieve, I'd like each filter section to work inclusively. For example if I select Action, and 2010 in second filter, I want to see posts that have both this tags.</p>

<p>Any ideas?</p>
