Toggle Checkbox child element

by mrrodd

HTML

<span id="lblProduct" class="label">Product/Stage</span>
<fieldset>
    <div id="rlbProduct" class="RadListBox RadListBox_Default" 
         style="font-family:Arial;font-size:X-Small;width:250px;">
         <div class="rlbGroup rlbGroupRight">
                <ul class="rlbList">
                    <li id="rlbProduct_i0" class="rlbItem">
                        <input type="checkbox" class="rlbCheck" />
                        <span class="rlbText">HDHP</span>
                    </li>
                    <li id="rlbProduct_i1" class="rlbItem">
                        <input type="checkbox" class="rlbCheck" checked="checked" />
                        <span class="rlbText">PPO</span>
                    </li>
                    <li id="rlbProduct_i2" class="rlbItem">
                        <input type="checkbox" class="rlbCheck" />
                        <span class="rlbText">SCP</span>
                    </li>
                </ul>
            </div>
             <input id="rlbProduct_ClientState" name="rlbProduct_ClientState" type="hidden" />
        </div>
</fieldset>

CSS

.rlbItem
{
    border: 1px solid blue;
    margin-bottom: 2px;
}

JavaScript

$("li.rlbItem").click(function(e) {
    var cb = $(this).find(":checkbox")[0];
    // If the user clicked the row and not the checkbox, toggle it
    if(e.target != cb) cb.checked = !cb.checked;
});