web-dev-qa-db-de.com

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

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. Diesen Teil kann ich herausfinden. Das Problem, das ich habe, ist, wie ich die Beschreibung aktiviere, so dass das Kontrollkästchen aktiviert wird, wenn ich auf die Beschreibung klicke. 

<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>
40
Mike Wills

Verwenden Sie ein Label mit dem Attribut for (Ich habe für Kontrollkästchen unterschiedliche IDs zugewiesen):

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

Eine andere Lösung (ohne das Attribut "for") enthält jedes <input />-Feld in <label></label>-Tags.

Beispiel:

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

Dies könnte eine Lösung sein, wenn Sie die Kontrollkästchen mit Beschriftungen als inline-block anzeigen müssen.

34

Erstens: Sie haben dort ein Duplikat id. Eine id sollte eindeutig sein.

Der einfachste Weg ist die Verwendung des Tags label , z.

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

Jetzt können Sie auf den Text klicken und das Kontrollkästchen aktivieren. Alternativ können Sie die click-Funktion von jQuery verwenden: http://www.google.com/#q=jquery+check+checkbox+on+click .

13
Alec

Sie können auch jQuery verwenden, wenn Sie keine "Bezeichnung" verwenden möchten.

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

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

0
Shijo Rs