Filtering on Checkboxes array

Filtering on Checkboxes array

by Max Belov

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<h2>Multiple Criteria  Filter</h2><span></span><div >
  <label for="red">red</label><input id="red" type="checkbox" value="red" checked />
<label for="blue">blue</label><input id="blue" type="checkbox" value="blue" checked />
<label for="green">green</label><input id="green" type="checkbox" value="green" />
<label for="yellow">yellow</label><input id="yellow" type="checkbox" value="yellow" />
</div>
<hr/>
<div class="products">
<div id=" yellow" class="product yellow">yellow</div>
<div id=" red" class="product red">red</div>
<div id=" blue" class="product blue">blue</div>
<div id="yellow red blue" class="product yellow red blue">red blue green</div>
</div>

CSS

.product { border: 12px solid ;margin:3px;padding:4px;display:inline-block}

.blueb{border-color:blue}
.blueshad{box-shadow: 4px 4px 4px blue}
.greenb{border-color:green}
.green{background:green}
.red{background:red}
.blue{background:blue}
.yellow{background:yellow}

JavaScript

$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
  $('.product').hide();
        $('input[type="checkbox"]:checked').each(function() {
$('div[id*=' + this.value + ']').fadeIn();
        });
    } else {
        $('.products > div').fadeIn();

    }
});