Show/hide divs via checkboxes

Initially show all divs. When checkbox selected, show only matching divs; hide all others.

by alano

HTML

<input class="tree" id="1" type="checkbox" name="1" />1<br/>
<input class="tree" id="2" type="checkbox" name="2" />2<br/>
<input class="tree" id="3" type="checkbox" name="3" />3<br/>
<input class="tree" id="4" type="checkbox" name="4" />4<br/>
<input class="tree" id="5" type="checkbox" name="5" />5<br/>

<div class="1 tree">Value 1</div>
<div class="2 tree">Value 2</div>
<div class="3 tree">Value 3</div>
<div class="4 tree">Value 4</div>
<div class="5 tree">Value 5</div>

JavaScript

$(document).ready(function(){
    var $divs = $("div.tree");
    var $checks = $("input.tree");
    var initialised = false;
    $checks.on("change", function(){ //when a checkbox clicked
        if (!initialised) {
            //first time; hide all divs               
            $divs.hide();
            initialised = true;
        }
        //show only the divs matching id of checked box
        $divs.filter("." + $(this).attr("id")).show();
    });
});