Question case à cocher jQuery modifier et cliquer sur l'événement


j'ai

<input type="checkbox" id="checkbox1" /> <br />
<input type="text" id="textbox1" />

et

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    });

    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            return confirm("Are you sure?");
        }
    });
});

JSFIDDLE lien

Ici, l'événement modifié met à jour la valeur de la zone de texte avec le statut de la case à cocher. J'utilise l'événement click pour confirmer l'action sur décocher. Si l'utilisateur sélectionne annuler, la coche est restaurée, mais le changement se déclenche même avant la confirmation, laissant les choses dans un état incohérent (la zone de texte indique faux lorsque la case à cocher est cochée). Comment puis-je gérer l'annulation et conserver la valeur de textbox cohérente avec l'état de vérification?


427
2017-08-11 18:50


origine


Réponses:


Eh bien, je ne vois pas une réponse qui correspond à la mienne, donc je posterai ceci. Testé dans JSFiddle et fait ce que vous demandez.Cette approche a l'avantage supplémentaire de se déclencher lorsque vous cliquez sur une étiquette associée à une case à cocher.

Réponse originale:

$(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'));        
    });
});

Réponse mise à jour:

$(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);        
    });
});

697
2017-08-11 19:05



Démo

Utilisation mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});

80
2017-08-11 18:53



La plupart des réponses ne l’accepteront pas (probablement) si vous utilisez <label for="cbId">cb name</label>. Cela signifie que lorsque vous cliquez sur l'étiquette, elle coche la case au lieu de cliquer directement sur la case à cocher. (Pas exactement la question, mais divers résultats de recherche ont tendance à venir ici)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

Dans quel cas vous pourriez utiliser:

Earlier versions of jQuery:

$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Exemple JSFiddle avec jQuery 1.6.4

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

JSFiddle exemple avec la dernière version de jQuery 2.x

  • Ajout d'exemples jsfiddle et du html avec l'étiquette de case à cocher cliquable

40
2018-02-13 06:36



Eh bien, juste pour sauver un mal de tête (il est minuit passé ici), je pourrais proposer:

$('#checkbox1').click(function() {
  if (!$(this).is(':checked')) {
    var ans = confirm("Are you sure?");
     $('#textbox1').val(ans);
  }
});

J'espère que cela aide


22
2017-08-11 18:57



Pour moi, cela fonctionne très bien:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})

9
2017-08-20 09:47



Vous voilà

Html

<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">

JavaScript

<script>
    $(document).ready(function () {

      $('input[id^="ProductId_"]').click(function () {

        if ($(this).prop('checked')) {
           // do what you need here     
           alert("Checked");
        }
        else {
           // do what you need here         
           alert("Unchecked");
        }
      });

  });
</script>

9
2017-07-10 13:39



Débarrassez-vous de l'événement change et modifiez plutôt la valeur de la zone de texte dans l'événement click. Plutôt que de retourner le résultat de la confirmation, l'attraper dans une var. Si c'est vrai, changez la valeur. Puis retournez le var.


6
2017-08-11 18:56



Case à cocher cliquer et vérifier la valeur dans la même boucle d'événement est le problème.

Essaye ça:

$('#checkbox1').click(function() {
    var self = this;
    setTimeout(function() {

        if (!self.checked) {
            var ans = confirm("Are you sure?");
            self.checked = ans;
            $('#textbox1').val(ans.toString());
        }
    }, 0);
});

Démonstration http://jsfiddle.net/mrchief/JsUWv/6/


6
2017-08-11 18:58



Essaye ça

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });

5
2017-08-11 18:58



$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    });

    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            if(!confirm("Are you sure?"))
            {
                $("#checkbox1").prop("checked", true);
                $('#textbox1').val($(this).is(':checked'));
            }
        }
    });
});

5
2017-08-11 19:05