Isotope - multiple filters with checkboxes

re: https://github.com/desandro/isotope/issues/83

by devangkantharia

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="filterGroup">
<select class="filter option-set" data-filter-group="color">
    <option data-filter-value="" selected="selected">All</option>
    <option data-filter-value=".red">Red</option>
    <option data-filter-value=".green">Green</option>
    <option data-filter-value=".blue">Blue</option>
    <option data-filter-value=".yellow">Yellow</option>        
</select> 
    
<select class="filter option-set" data-filter-group="size">
   <option data-filter-value="" selected="selected">All</option>
   <option data-filter-value=".short">Short</option>
    <option data-filter-value=".tall">Tall</option>  
   <option data-filter-value=".fat">Fat</option>
    <option data-filter-value=".thin">Thin</option>      
 </select>  
</div>   



<div id="container">
    <div class="item red tall"></div>
    <div class="item blue tall"></div>
    <div class="item green tall"></div>
    <div class="item yellow tall"></div>
    <div class="item red short"></div>
    <div class="item blue short"></div>
    <div class="item green short"></div>
    <div class="item yellow short"></div>
    <div class="item red thin"></div>
    <div class="item blue thin"></div>
    <div class="item green thin"></div>
    <div class="item yellow thin"></div>
    <div class="item red fat"></div>
    <div class="item blue fat"></div>
    <div class="item green fat"></div>
    <div class="item yellow fat"></div>
</div>

CSS

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

#container {
    border: 1px solid #333;
    padding: 3px;
}

.item {
    width: 70px;
    height: 70px;
    margin: 3px;
    float: left;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }

.short { height: 100px; }
.tall { height: 200px; }
.thin { width: 100px; }
.fat { width: 200px; }

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

$(function() {
    var $container = $('#container'),
        $select = $('div#filterGroup select');
    filters = {};

    $container.isotope({
        itemSelector: '.item'
    });
        $select.change(function() {
        var $this = $(this);

        var $optionSet = $this;
        var group = $optionSet.attr('data-filter-group');
    filters[group] = $this.find('option:selected').attr('data-filter-value');

        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }
        var selector = isoFilters.join('');

        $container.isotope({
            filter: selector
        });

        return false;
    });

});