case à cocher vérification de vérification

Question

HTML:

<div> 
    <input> 
    <label> 
</div> 

JS:

$('div input').live('click',function(){ 
    alert($(this).is(':checked')); 
}); 
$('div').live('click,'function(e){ 
    if(!$(e.target).is('input')) 
     $(this).find('input').click(); 
}); 

Chaque fois que je clique sur l'entrée, il affiche avec précision ce que l'entrée se transforme en (si je tourne sur l'entrée il alerte vrai)
Mais quand je clique sur le div/label, il fait le contraire (quand l'entrée s'allume, il alerte false)

Y at-il un moyen de tester si l'entrée est activée et désactivée dans les deux cas au lieu de 1?

[Je suppose que la raison pour laquelle cela se produit parce que l'un est déclenché par le navigateur qui se passe avant jquery (même si je supposais jquery devrait se produire en premier lieu, mais peu importe) et dans l'autre cas, le jquery est en cours d'exécution avant la déclenche le 'checked', mais n'arrive pas à comprendre comment retarder le trigger avant le script, ou le forcer à s'exécuter avant le script.]

Merci d'avance!

Answer 1

Vous pouvez surveiller change() sur la case à cocher elle-même, puis sur DIV cliquez sur vous pouvez modifier la valeur dans la case à cocher directement, puis déclencher change() au lieu de click().

$('input[type="checkbox"]').live('change',function(){ 
    alert($(this).is(':checked')); 
}); 

$('div').live('click',function(e){ 
    if(!$(e.target).is('input')) { 
     var $input = $(this).find('input'); 
     $input.prop("checked", !$input.is(':checked')).change(); 
    } 
}); 

Aussi, si votre but est d'éviter toute gêne <label for="" />, vérifier cela.

<label><input type="checkbox" value="awesome" /> Check it</label> 

Answer 2

essayez ceci:

$('div input').live('click',function(){ 
    alert($(this).is(':checked')); 
}); 
$('div').live('click,'function(e){ 
    if(!$(e.target).is('input')) 
     $(this).find('input').triggerHandler("click"); 
});