Filtering click() if .attr ----

filtering by checkboxes

by Akram kamal

HTML

<ul id="filters">
    <li>
        <input type="checkbox" value="categorya" id="filter-categorya" />
        <label for="filter-categorya">Category A</label>
    </li>
    <li>
        <input type="checkbox" value="categoryb" id="filter-categoryb" />
        <label for="filter-categoryb">Category B</label>
    </li>
</ul>

<div class="categorya categoryb">A, B</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>

<br />
<p class="info">
    - If you select Category A: four boxes will apear [A,B] [A] [A] [A]
    <br/><br/>
    - Then if you select Category B and deselect it again: the purple box [A,B] will disapear because the script commands to hide 'B'.
    <br/><br/>
    - But I don't want the script to hide box 'B' when it also contains 'A'..
</p>

CSS

.categorya, .categoryb {
    display:none;
    width: 30px;
    height: 20px;
    line-height:20px;
    text-align:center;
    background: red;
    margin: 10px;
    float: left;
    font-size:11px;
    color:white;
    font-family:sans-serif;
}

.categoryb {
    background: blue;
}

.categorya.categoryb{
    background:purple;
}
p.info{
    padding:30px 20px 0 20px;
    color:#666;
    font-family:sans-serif;
    font-size:13px;
}

JavaScript

// http://stackoverflow.com/questions/8796472/filtering-with-checkboxes-using-jquery

$("#filters :checkbox").click(function() {
       $("div").hide();
       $("#filters :checkbox:checked").each(function() {
           $("." + $(this).val()).show();
       });
    });