Check checkbox when clicking on description

Mike Wills picture Mike Wills · Jan 14, 2011 · Viewed 64.8k times · Source

I will be creating a list of check boxes that will be built by jQuery and JSON. The list will be a selection of groups that a message can be sent to. It could be one of more groups. This part I can figure out. The problem I am having is how do I enable the description so that when I click on the description, the checkbox is selected.

<div>
    <label for="group">
        Select lists
    </label>
</div>
<div>
    <input type="checkbox" name="group" id="group" value="1" title="Main List" />Main List
    <input type="checkbox" name="group" id="group" value="2" title="Secondary List" />Secondary List
</div>

Answer

Chandu picture Chandu · Jan 14, 2011

Use a Label with for attribute (I assigned different IDs for checkboxes) :

<div>
    <label for="group">
        Select lists
    </label>
</div>
<div>
    <input type="checkbox" name="group" id="group1" value="1" title="Main List" />
    <label for="group1">Main List</label>
    <input type="checkbox" name="group" id="group2" value="2" title="Secondary List" />
    <label for="group2">Secondary List</label>
</div>