Aktivieren Sie das Kontrollkästchen, wenn Sie auf Beschreibung klicken

Question

Ich werde eine Liste von Kontrollkästchen erstellen, die von jQuery und JSON erstellt werden. Die Liste enthält eine Auswahl von Gruppen, an die eine Nachricht gesendet werden kann. Es könnte eine von mehreren Gruppen sein. Dieser Teil kann ich herausfinden. Das Problem, das ich habe, ist, wie ich die Beschreibung aktivieren, so dass, wenn ich auf die Beschreibung klicke, das Kontrollkästchen ausgewählt ist.

<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 1

Verwenden Sie ein Label mit for Attribut (I verschiedene IDs für Kontrollkästchen zu vergeben):

<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> 

Answer 2

Erstens: Sie haben ein Duplikat id drin. Ein id sollte eindeutig sein.

Der einfachste Weg ist es, die label Tag zu verwenden, z.B .:

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

Jetzt können Sie auf den Text klicken und es wird das Kontrollkästchen hin- und herzuschalten. Eine Alternative ist die Verwendung der click-Funktion von jQuery: http://www.google.com/#q=jquery+check+checkbox+on+click.

Answer 3

Auch könnten Sie jQuery verwenden, wenn Sie an Anwender wollen keine '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> 

Answer 4

Eine andere Lösung (ohne Verwendung des Attributs "for") besteht darin, jedes <input /> Feld in <label></label> Tags einzubeziehen.

Beispiel:

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

Dies könnte eine Lösung, wenn Sie die Kontrollkästchen mit Etiketten wie inline-block angezeigt haben.