Pourquoi ce n'est pas ma case changement événement déclenché?

J'ai deux fonctions.

La première fonction se traduit par une div cliquez dans une cochée/décochée bascule.
La deuxième fonction se traduit par une case à cocher changer en cacher/afficher l'événement.

Le problème est que lorsque j'utilise la fonction première de cocher/décocher la case, la deuxième fonction n'est pas appelée. Je suis nouveau sur le javascript, merci.

<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").parent().click(function(evt) {
        if (evt.target.type !== 'checkbox') {
            var $checkbox = $(":checkbox", this);
            $checkbox.attr('checked', !$checkbox.attr('checked'));
            evt.stopPropagation();
            return false;
        }
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").change(function() {
        if($(this).attr("checked")) {
            $('.'+this.id).show();
        }
        else {
            $('.'+this.id).hide();
        }
    });
});
</script>
InformationsquelleAutor sxv | 2011-02-02
  1. 33

    La changement événement ne se déclenche pas lorsque vous modifier par programmation la valeur d'une case à cocher. Ce que vous pouvez faire pour s'assurer qu'il tire est:

     $(":checkbox").parent().click(function(evt) {
    if (evt.target.type !== 'checkbox') {
        var $checkbox = $(":checkbox", this);
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $checkbox.change();
    }
});
    • Votre théorie vérifie et votre solution fonctionne parfaitement. Merci.
    • Mieux utiliser (au moins avec certaines versions de jQuery) $.fn.prop vs $.fn.attr. Attr attribuera ainsi que de récupérer. Prop récupère simplement.
    InformationsquelleAutor Matthew Manela
  2. 5

    Ne vous embêtez pas avec le premier extrait. Juste l'utilisation d'éléments de l'ÉTIQUETTE: 

    <label><input type="checkbox">Some option</label>

    Maintenant, lorsque l'utilisateur clique sur l'étiquette (le texte en regard de la case à cocher), la case à cocher est activée.

    Le deuxième extrait de code peut être optimisé: 

    $('input:checkbox').change(function() {
    $('#' + this.id).toggle(this.checked);
});
    • le $('.' + ce.id) sélecteur de coutume de travail. Besoin d'utiliser '#'. Et nous ne savons pas ce qui est dans le div, vous êtes en supposant qu'il est en l'utilisant comme une étiquette, il pourrait être quelque chose d'autre.
    InformationsquelleAutor Šime Vidas
  3. 1

    vous utilisez '.' qui est pour les sélecteurs de classe au lieu d'utiliser '#' puisque vous êtes à l'aide de l'IDENTIFIANT de l'élément. Comme ceci:

    $(document).ready(function() {
    $(":checkbox").bind('change', function() {
        if($(this).attr("checked")) {
            $('#'+this.id).show();
        }
        else {
            $('#'+this.id).hide();
        }
    });
});
    • l'OP n'a que sur le but.. 😉 il n'est pas de cacher/montrer les cases, mais la <div> avec une classe correspondant à l'id de la case.
    • Ce qui n'aurait pas de sens, puisque la case est l'élément qui a obtenu que l'ID.
    • Je n'ai pas essayer de donner un sens à ce qu'ils essaient de faire. Si c'est le cas, il n'était pas clair.
    • Assez juste, mais sans le balisage votre supposition est aussi bonne que la mienne. Mais je suppose que cela a du sens.
    • Ainsi, lorsque le visiteur vérifie la case, il doit devenir visible? Mais c'était déjà visible, sinon le visiteur ne pouvait pas avoir vérifié. Qui n'a pas de sens.
    • Je suis d'accord il ne fait pas de sens. J'ai vu de plus étrange des choses. Je suppose que nous devrons simplement attendre pour l'OP, pour voir ce qu'il est en train de faire.
    • Reigel est droit. Je vais publier sur le site dans quelques jours.

    InformationsquelleAutor Victor