web-dev-qa-db-fra.com

Cochez la case lorsque vous cliquez sur la description

Je vais créer une liste de cases à cocher qui seront créées par jQuery et JSON. La liste sera une sélection de groupes auxquels un message peut être envoyé. Ce pourrait être un groupe parmi d'autres. Cette partie, je peux comprendre. Le problème que je rencontre est comment puis-je activer la description afin que lorsque je clique dessus, la case à cocher soit cochée. 

<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>
htmlasp.net-mvccheckbox
40
Mike Wills

Utilisez une étiquette avec l'attribut for (j'ai affecté différents ID pour les cases à cocher):

<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

Une solution différente (sans utiliser l'attribut "for") consiste à inclure chaque champ <input /> dans les balises <label></label>.

Exemple:

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

Cela pourrait constituer une solution si vous devez afficher les cases à cocher avec des étiquettes sous la forme inline-block.

34
Janaka R Rajapaksha

Premièrement: vous avez un duplicata id dedans. Un id devrait être unique.

Le moyen le plus simple consiste à utiliser le label tag, par exemple:

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

Maintenant, vous pouvez cliquer sur le texte et il va basculer la case à cocher. Une alternative consiste à utiliser la fonction click de jQuery: http://www.google.com/#q=jquery+check+checkbox+on+click .

13
Alec

Vous pouvez aussi utiliser jQuery si vous ne voulez pas utiliser une 'étiquette'

 <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