web-dev-qa-db-fra.com

Pourquoi mon événement de changement de boîte à cocher n'est-il pas déclenché?

J'ai deux fonctions.

La première fonction traduit un DIV Cliquez sur une bascule cochée/décochée. La deuxième fonction traduit une case à cocher Changez-vous dans un événement Masquer/Afficher.

Le problème est que lorsque j'utilise la première fonction pour vérifier/décocher la case, la deuxième fonction n'est pas appelée. Je suis nouveau à 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>
javascriptjqueryhtmlcheckboxclick
21
sxv

Le Modifier L'événement ne se déclenche pas lorsque vous modifiez programmablement la valeur d'une case à cocher. Ce que vous pouvez faire pour vous assurer que les incendies sont:

 $(":checkbox").parent().click(function(evt) {
    if (evt.target.type !== 'checkbox') {
        var $checkbox = $(":checkbox", this);
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $checkbox.change();
    }
});
33
Matthew Manela

Ne vous inquiétez pas avec le premier extrait. Utilisez simplement des éléments d'é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 sera activée.

Le deuxième extrait peut être optimisé:

$('input:checkbox').change(function() {
    $('#' + this.id).toggle(this.checked);
});
5
Šime Vidas

vous utilisez '.' qui est pour les sélecteurs de classe, utilisez plutôt '#' Depuis que vous utilisez l'identifiant d'élément. Comme ça:

$(document).ready(function() {
    $(":checkbox").bind('change', function() {
        if($(this).attr("checked")) {
            $('#'+this.id).show();
        }
        else {
            $('#'+this.id).hide();
        }
    });
});
1
Victor