Comment maintenir des valeurs de case à cocher et de zone de texte cohérentes dans jQuery : résoudre les problèmes d'annulation

Événement de changement et de clic de case à cocher jQuery : maintenir la cohérence avec la valeur de la zone de texte

Dans les scénarios impliquant des cases à cocher et des zones de texte correspondantes, il est crucial d'assurer la cohérence dans leurs valeurs. Cependant, lors de l'utilisation des événements .change() et .click() sur la case à cocher, il est possible de rencontrer un problème où la valeur de la zone de texte devient incohérente avec l'état de la case à cocher lors de l'annulation.

Le problème survient parce que .change () met à jour la valeur de la zone de texte en fonction de l'état de la case à cocher, tandis que .click() gère la confirmation en cas de décoche. Si l'utilisateur annule l'action de décoche, .change() se déclenche avant la confirmation, laissant la valeur de la zone de texte obsolète.

Résoudre l'incohérence

Pour résoudre ce problème, le les solutions suivantes peuvent être mises en œuvre :

Réponse mise à jour :

Utiliser this.checked au lieu de $(this).is(':checked') et déplacer la logique de confirmation dans l'événement .change() garantit que la valeur de la zone de texte est mise à jour correctement uniquement si la confirmation est réussie.

<code class="javascript">$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});</code>

Réponse originale :

Vous pouvez également utiliser $( this).attr("checked", returnVal) et $(this).is(':checked') dans l'événement .change() obtiennent le même résultat, garantissant que la valeur de la zone de texte n'est mise à jour que si la confirmation est réussie.

<code class="javascript">$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});</code>

Ces solutions empêchent efficacement la valeur de la zone de texte de devenir incohérente avec l'état de la case à cocher lors de l'annulation, garantissant ainsi une représentation précise de la sélection de l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!