Comment faire pour cocher une seule case sur un clic d'un élément différent?

Question

J'essaie de trouver un moyen plus simple et plus propre de cocher et décocher une case lorsque je clique sur un élément div. C'est le code que j'utilise actuellement qui fonctionne pour la vérification, mais la décocher ne fonctionne pas.

http://codepen.io/jimmykup/full/xkoqJ

Je comprends ce que j'ai écrit qui pourrait être fait dans une plus rapide et/ou plus simple moyen, mais je suis à une perte sur la façon.

Note: Je travaille avec une case à cocher qui va être insérée via javascript.

HTML:

<div class="container"> 

    <input type="checkbox" class="confirm" name="ld_Confirm" id="ld_Confirm"><div class="click-me unchecked">Click here to check the checkbox.</div> 

</div> 

jQuery:

(function() { 

$('.click-me').before('<input type="checkbox" class="confirm" name="ld_Confirm" id="ld_Confirm">'); 

$(".container .click-me.unchecked").click(function() { 
    $(".confirm").prop("checked", true); 
    $(".click-me").toggleClass("unchecked"); 
    $(".click-me").toggleClass("checked"); 
}); 

$(".container .click-me.checked").click(function() { 
    $(".confirm").prop("checked", false); 
    $(".click-me").toggleClass("unchecked"); 
    $(".click-me").toggleClass("checked"); 
}); 

})(); 

Answer 1

Le problème est que vous créez un gestionnaire d'événements click lors du chargement de document, mais puisque vous basculez la classe du conteneur, le gestionnaire n'est pas lié au div. En d'autres termes: au moment où le code est chargé, il n'y a pas de div s avec la classe unchecked, de sorte que le gestionnaire d'événements n'est lié à rien.

La solution rapide est d'utiliser délégation de l'événement pour lier le gestionnaire dynamique:

$(".container").on('click','.click-me.unchecked',function() { 
    $(".confirm").prop("checked", true); 
    $(".click-me").toggleClass("unchecked"); 
    $(".click-me").toggleClass("checked"); 
}); 
$(".container").on('click','.click-me.checked',function() { 
    $(".confirm").prop("checked", false); 
    $(".click-me").toggleClass("unchecked"); 
    $(".click-me").toggleClass("checked"); 
}); 

Cependant, existe une meilleure approche. Vous pouvez rationaliser votre code énormément en définissant simplement la propriété checked de la case à cocher à son inverse. Ce faisant, vous supprimez la nécessité d'une délégation et, en effet, la nécessité d'checked et unchecked les classes entièrement (en supposant que vous n'êtes pas aussi les utiliser pour le style ou dans un autre script):

$(".container").on('click','.click-me',function() { 
    $(".confirm").prop("checked", !$(".confirm").prop("checked")); 
}); 

http://jsfiddle.net/mblase75/bNkxG/

Answer 2

$('.click-me').click(function() { 
    var checkBoxes = $(".confirm"); 
    checkBoxes.attr("checked", !checkBoxes.attr("checked")); 
});  

de here

vous pouvez toujours essayer de recherche Google ou SO, pour "jquery case à bascule"

Incase cette div ne va pas être là sur le document charge

$(document).on('click' , '.click-me', (function() { 
    var checkBoxes = $(".confirm"); 
    checkBoxes.attr("checked", !checkBoxes.attr("checked")); 
});  

il ne devrait pas d'importance si la case avec la classe « .Confirmer » était là la charge de la page, tant que c'est là quand ce clic