Check checkbox when clicking on description

A different solution (without using the "for" attribute) is including each <input /> field inside of <label></label> tags.

Example:

<label><input type="checkbox" value="" /> Click Here to Check This</label>

This could a solution if you have to display the checkboxes with labels as inline-block.


First: you have a duplicate id in there. An id should be unique.

The easiest way is to use the label tag, e.g.:

<input type="checkbox" name="group" id="group_1" />
<label for="group_1">description</label>

Now you can click on the text and it'll toggle the checkbox. An alternative is to use jQuery's click function: http://www.google.com/#q=jquery+check+checkbox+on+click.


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>