Check checkbox when clicking on description
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>
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>
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.
Also you could use jQuery if you don't want to user a 'label'
<input type="checkbox" name="SelectionCheckbox" id="SelectionCheckbox" />
<div onclick="$('input[id $=SelectionCheckbox]').attr('checked', this.checked);">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>