JQuery Cliquez sur l'enfant lorsque Parent Clicked

Question

J'ai une longue journée ....

Je le code ci-dessous

<div class="background" onclick="javascript:$('this checkbox').click();"> 
    <div class="picture"> 
     <img class="colors" src="458x395.png" /> 
    </div> 
    <input type="checkbox" value="nothing" name="check" class="selsts" /> 
</div> 
<div class="background" onclick="javascript:$('this checkbox').click();"> 
    <div class="picture"> 
     <img class="colors" src="asdfag3.png" /> 
    </div> 
    <input type="checkbox" value="aff4t" name="check" class="selsts" /> 
</div> 

Et son supposé cliquez sur la case à cocher. Je ne peux pas distinguer par nom, classe ou id, je dois utiliser le type. Je dois aussi m'assurer que c'est dans la div parent et rien d'autre.

Une idée pourquoi cela ne fonctionne pas? Je suis sûr que je suis juste un moment stupide. : \

Merci

Answer 1

Votre jQuery est à la recherche d'une balise this, qui n'existe pas. Vous ne devriez pas intégrer votre JS. Et .click() ne vérifie pas les DOM lorsque vous ajoutez de nouveaux éléments, alors essayez ceci:

<div class="background"> 
    <div class="picture"> 
     <img class="colors" src="458x395.png" /> 
    </div> 
    <input type="checkbox" value="nothing" name="check" class="selsts" /> 
</div>​ 

puis pour l'obtenir pour vérifier effectivement l'utilisation de cases à cocher (ce qui est jQuery 1.7):

$(".background").on("click",function(e) { 
    var chk = $(this).find('input[type=checkbox]')[0]; 
    chk.checked = !chk.checked; 
});​ 

cette solution ne se heurte pas au problème de bouillonnement DOM décrit par James

Answer 2

Vous passez cela en tant que chaîne, pas en tant qu'objet. Jquery ne comprendra pas la portée de cela. Pensez à attacher la fonction en dehors du HTML pour séparer les préoccupations

Essayez ceci cela permettra à l'utilisateur de cocher/décocher et ne propagera pas l'événement créant une boucle.

<div class="background"> 
    <div class="picture"> 
     <img class="colors" src="458x395.png" /> 
    </div> 
    <input type="checkbox" value="nothing" name="check" class="selsts" /> 
</div> 

Javascript

$(document).ready(function(){ 
    $(".background").click(function(e){ 
     var chk = $($(this).find("input[type='checkbox']")); 
     if(chk.attr('checked')) 
     { 
      chk.attr('checked',false); 
     }else{ 
      chk.attr('checked',true); 
     } 

     }); 
    }); 

Exemple: http://jsfiddle.net/fycFB/

Answer 3

Comme vous utilisez jQuery, vous ne devriez probablement pas utiliser l'attribut onclick pour lier votre gestionnaire d'événements.

Le problème principal est que vous passez une chaîne à jQuery. Cette chaîne est interprétée comme un sélecteur et recherchera un élément de type checkbox qui est un descendant d'un élément de type this. Évidemment, cela ne va pas exister.

Vous voulez faire quelque chose comme:

$("div.background").click(function() { 
    $(this).find(":checkbox").click(); 
}); 

Ou, vous pouvez passer à this jQuery comme contexte (ce qui équivaut à l'utilisation find):

$("div.background").click(function() { 
    $(":checkbox", this).click(); 
}); 

Notez que je suis en utilisant :checkbox au lieu de seulement checkbox (avec le :). C'est un sélecteur qui correspond à input éléments de type checkbox.

Cependant, il y a probablement un gros problème avec ceci. Vous allez vous retrouver coincé dans une boucle infinie (puisque les événements DOM éclatent dans l'arbre).Vous devrez capturer l'événement click sur la case à cocher et arrêter la propagation de celui-ci.

Answer 4

onclick="$(this).find(':checkbox').attr('checked','checked')" 

Answer 5

HTML

<div class="background"> 
    <div class="picture"> 
     <img class="colors" src="458x395.png" /> 
    </div> 
    <input type="checkbox" value="nothing" name="check" class="selsts" /> 
</div> 

Javascript

$('div.background').click(function() { 
    var checkBox = $(this).find('input:checkbox'); 
    checkBox.attr('checked', !checkBox.attr('checked')); 
}); 

Answer 6

Avez-vous besoin comme ça?

$("input[type=checkbox]").click(function(){ alert('Checked');});​ 

http://jsfiddle.net/JF2xu/1/

Answer 7

<div class="background" style="border:1px solid black;" onclick="javascript:$(this).find(':checkbox').attr('checked',true);"> 
        <div class="picture"> 
        <img class="colors" src="458x395.png" /> 
        </div> 
       <input type="checkbox" value="nothing" name="check" class="selsts" /> 
      </div>