Discussion :

[johnstyle]

Bonjour,
j'ai un petit problème avec les cases à cocher et l'événement onclick.

Je souhaiterais cocher une checkbox lorsque je clique sur le texte qui lui correspond.

Jusque là aucun souci, cependant lorsque je clique sur la checkbox (et non sur le texte) celle-ci se coche puis se décoche aussi tôt car elle cumule 2 événements.

Voici un exemple qui illustre mon problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div onclick="if(!document.getElementById('testc').checked)document.getElementById('testc').checked=true;else document.getElementById('testc').checked=false;">
<input id="testc" type="checkbox" /> lorsque je clique ici je coche la case
</div>

Je sais qu'il y a cette solution, mais elle ne me convient pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<label>
<input type="checkbox" /> lorsque je clique ici je coche la case
</label>

auriez-vous une autre solution à me proposer ?

Merci.

[andry.aime]

Salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="testc" type="checkbox" /><a href="#" onclik="document.getElementById('testc').checked=true;return false;"> lorsque je clique ici je coche la case</a>

[Bovino]

Je sais qu'il y a cette solution, mais elle ne me convient pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<label>
<input type="checkbox" /> lorsque je clique ici je coche la case
</label>

Pourquoi elle ne te convient pas dans la mesure où elle fait exactement ce que tu demandes ???

[RomainVALERI]

Pourquoi elle ne te convient pas dans la mesure où elle fait exactement ce que tu demandes ???

+1 ^^

Et en passant : l'utilisation de "label" est plus riche sémantiquement, et elle peut aussi s'écrire de cette façon :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<label htmlFor="maCase">lorsque je clique ici je coche la case</label>
<input type="checkbox" id="maCase" /> lorsque je clique ici je coche la case

[johnstyle]

Ok merci pour vos suggestions ^^

Pourquoi elle ne te convient pas dans la mesure où elle fait exactement ce que tu demandes ???

Vous vous doutez-bien que si je pouvais utiliser cette méthode, je le ferais ^^" et ce serrait trop long à expliquer le pourquoi du comment.

Cependant j'avais oublier que l'on pouvais sortir le input du label, je pense que je vais opter pour cette méthode.

ps: "htmlFor" ne marche pas chez moi mais "for" si.

Merci pour votre aide

[Bovino]

htmlFor sert à affecter dynamiquement l'attribut HTML for en JavaScript.

[RomainVALERI]

ps: "htmlFor" ne marche pas chez moi mais "for" si.

Mea culpa et précision :
"for" étant un mot réservé de javascript, on y fait référence dans le code js avec htmlFor, mais dans le code html effectivement, le nom de la propriété est bien "for" ^^