Check checkbox when clicking on description

Htmlasp.net MvcCheckbox

Html Problem Overview


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>

Html Solutions


Solution 1 - Html

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>

Solution 2 - Html

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.

Solution 3 - Html

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.

Solution 4 - Html

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>

Solution 5 - Html

<label style="cursor:pointer" for="clickme">clickme</label><br>
<span><input id="clickme" type="checkbox"/>anand</span> 

Solution 6 - Html

You must give values to both 'id' in 'input' tag and 'for' in 'label' tag, and both must be same.

<input type="checkbox" id="web">
<label for="web">Web research</label>

<input type="checkbox" id="shop">
<label for="shop">Shopping</label>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMike WillsView Question on Stackoverflow
Solution 1 - HtmlChanduView Answer on Stackoverflow
Solution 2 - HtmlJanaka R RajapakshaView Answer on Stackoverflow
Solution 3 - HtmlAlecView Answer on Stackoverflow
Solution 4 - HtmlGregView Answer on Stackoverflow
Solution 5 - HtmlShijo RsView Answer on Stackoverflow
Solution 6 - Htmldrac_oView Answer on Stackoverflow