Filtering click() if .attr ----

by Brett

HTML

<ul id="alpha">
    <h2>Alpha</h2>
    <li>
        <input type="checkbox" value="a" id="alpha-a" />
        <label for="alpha-a">A</label>
    </li>
    <li>
        <input type="checkbox" value="b" id="alpha-b" />
        <label for="alpha-b">B</label>
    </li>
    <li>
        <input type="checkbox" value="c" id="alpha-c" />
        <label for="alpha-c">C</label>
    </li>
</ul>
<ul id="filters">
    <h2>Categories:</h2>
    <li>
        <input type="checkbox" value="academics" id="filter-academics" />
        <label for="filter-academics">Academics</label>
    </li>
    <li>
        <input type="checkbox" value="campus" id="filter-campus" />
        <label for="filter-campus">Campus</label>
    </li>
    <li>
        <input type="checkbox" value="people" id="filter-people" />
        <label for="filter-people">People</label>
    </li>
    <li>
        <input type="checkbox" value="buildings" id="filter-buildings" />
        <label for="filter-buildings">Buildings</label>
    </li>
    <li>
        <input type="checkbox" value="about" id="filter-about" />
        <label for="filter-about">About</label>
    </li>
</ul>
<h1>Results:</h1>
<div class="academics campus a c">Academics, Campus</div>
<div class="academics a">Academics</div>
<div class="academics a">Academics</div>
<div class="campus c">Campus</div>
<div class="campus c">Campus</div>
<div class="people a">People</div>
<div class="people a">People</div>
<div class="buildings b">Buildings</div>
<div class="buildings b">Buildings</div>
<div class="about a">About</div>
<div class="about a">About</div>

CSS

h1, h2 {
    margin: 20px 0 10px;
    font-weight: bold;
}

.academics, 
.campus,
.people,
.buildings,
.about {
    display:none;
    width: 80px;
    height: 20px;
    line-height:20px;
    text-align:center;
    background: #666;
    margin: 10px;
    float: left;
    font-size:11px;
    color:white;
    font-family:sans-serif;
}
div {
    display: block;
}

JavaScript

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

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