Checkbox Show/Hide controls

by paulyabsley

HTML

<form>
    <ul>
        <li>
            <label for="filter1">Filter 1</label>
            <input type="checkbox" name="filter1" id="filter1" checked />
        </li>
        <li>
            <label for="filter2">Filter 2</label>
            <input type="checkbox" name="filter2" id="filter2" checked />
        </li>
        <li>
            <label for="filter3">Filter 3</label>
            <input type="checkbox" name="filter3" id="filter3" checked />
        </li>
    </ul>
</form>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>

CSS

div {
    min-height:100px;
    margin:10px;
}

#div1 {
    background:blue;
}
#div2 {
    background:red;
}
#div3 {
    background:green;
}

JavaScript

$(document).ready(function() {
   $('#filter1').click(function(){
     $('#div1').toggle();
   });
   $('#filter2').click(function(){
     $('#div2').toggle();
   });
   $('#filter3').click(function(){
     $('#div3').toggle();
   });
 });