[Résolu]Comportement des checkbox

Salut à tous,

jJ'ai commencé a faire une mini messagerie. Chaque message est une div sous cette forme

<div onclick='check_checkbox(this);'>
     <input type='checkbox' />
     "Mon message"
</div>

Le soucis c'est que cliquer sur la checkbox pour ensuite dire : "j'ai lu mon message" ou "je l'archive" n'est pas très pratique (dixit les utilisateurs). Du coup je voulais cliquer sur la div pour lui demander de cocher la case.

function check_checkbox(obj){
    if(obj.firstChild.checked == true){
        obj.firstChild.checked = false;
    }else{
         obj.firstChild.checked = true;
    }
}

Ca fonctionne bien ca y'a pas de problème.
Alors quel est le soucis ?

Et bien le soucis c'est que comme la checkbox est dans la div sur laquelle se trouve le onclick, cliquer sur la checkbox revient à cliquer sur la <div>
ce qui fait que le "html" coche la checkbox, puis active la fonction de la div (qui du coup bah détecte une case cochée et la décoche)

en live cela rend simplement la checkbox inactive.

Je ne sais pas trop comment m'en sortir proprement. si quelqu'un à une idée je suis preneur.
Modifié par ffwrude (04 Aug 2014 - 14:21)

Bonjour.

Plutôt que passer par du javascript, essaie d'utiliser la balise <label>

<input type="checkbox" id="msg1">
<label for="msg1">Mon message</label>

Après à toi de gérer en CSS.

Oh nice !

Je connaissais pas du tout ce truc

Merci bien. J'ai effectivé utiliser cela avec du CSS derrière

Merci bien !