Changement de case à cocher jQuery et événement de clic

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

Ici, .change()la valeur de la zone de texte est mise à jour avec l'état de la case à cocher. J'utilise .click()pour confirmer l'action sur décocher. Si l'utilisateur sélectionne Annuler, la coche est restaurée mais se .change()déclenche avant confirmation.

Cela laisse les choses dans un état incohérent et la zone de texte indique false lorsque la case est cochée.

Comment puis-je gérer l'annulation et garder la valeur de la zone de texte cohérente avec l'état de vérification?

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

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

Démo

Utilisation mousedown

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

La plupart des réponses ne l'attraperont 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 ce cas, vous pouvez 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());
    }
});

Exemple JSFiddle avec la dernière jQuery 2.x

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

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

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

J'espère que cela aide

Pour moi, cela fonctionne très bien:

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

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>

Débarrassez-vous de l'événement de modification et modifiez à la place la valeur de la zone de texte dans l'événement de clic. Plutôt que de renvoyer le résultat de la confirmation, attrapez-le dans une var. Si c'est vrai, changez la valeur. Retournez ensuite la var.

Cliquez sur la case à cocher et vérifiez la valeur dans la même boucle d'événements.

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émo: http://jsfiddle.net/mrchief/JsUWv/6/

si vous utilisez l'iCheck Jquery, utilisez le code ci-dessous

 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
            });

Essaye ça

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

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

// this works on all browsers.

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

    $('#checkbox1').change(function(e) {
        this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
        $('#textbox1').val(this.checked);
        return true;
    });
});

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


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

Réponse tardive, mais vous pouvez également utiliser on("change")

$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check" > <span>Check me!</span>

il suffit simplement d'utiliser l'événement de clic, mon ID de case à cocher est CheckAll

     $('#CheckAll').click(function () {

        if ($('#CheckAll').is(':checked') == true) {

             alert(";)");
      }
    }

obtenir la valeur radio par son nom

 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });

Je ne sais pas pourquoi tout le monde rend cela si compliqué. C'est tout ce que j'ai fait.

if(!$(this).is(":checked")){ console.log("on"); }

 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })