casilla de verificación jQuery cambiar y hacer clic en evento

$(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"/>

Aquí .change()actualiza el valor del cuadro de texto con el estado de la casilla de verificación. Yo uso .click()para confirmar la acción al desmarcar. Si el usuario selecciona cancelar, la marca de verificación se restaura pero se .change()activa antes de la confirmación.

Esto deja las cosas en un estado inconsistente y el cuadro de texto dice falso cuando la casilla de verificación está marcada.

¿Cómo puedo hacer frente a la cancelación y mantener el valor del cuadro de texto coherente con el estado de verificación?

Probado en JSFiddle y hace lo que está pidiendo. Este enfoque tiene el beneficio adicional de disparar cuando se hace clic en una etiqueta asociada con una casilla de verificación.

Respuesta actualizada:

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

Respuesta original

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

Manifestación

Utilizar mousedown

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

La mayoría de las respuestas no lo captarán (presumiblemente) si las usa <label for="cbId">cb name</label>. Esto significa que cuando hace clic en la etiqueta, marcará la casilla en lugar de hacer clic directamente en la casilla de verificación. (No es exactamente la pregunta, pero varios resultados de búsqueda tienden a venir aquí)

<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>

En cuyo caso podrías usar:

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

Ejemplo de JSFiddle con 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());
    }
});

Ejemplo de JSFiddle con la última versión de jQuery 2.x

• Se agregaron ejemplos de jsfiddle y el html con la etiqueta de casilla de verificación en la que se puede hacer clic

Bueno ... solo por ahorrar un dolor de cabeza (es pasada la medianoche aquí), podría pensar:

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

Espero eso ayude

Para mí esto funciona muy bien:

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

Aquí estás

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>

Deshágase del evento de cambio y, en su lugar, cambie el valor del cuadro de texto en el evento de clic. En lugar de devolver el resultado de la confirmación, póngalo en una var. Si es cierto, cambie el valor. Luego devuelva la var.

El problema es hacer clic en la casilla de verificación y verificar el valor en el mismo bucle de eventos.

Prueba esto:

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

Demostración: http://jsfiddle.net/mrchief/JsUWv/6/

Si está utilizando iCheck Jquery, use el código siguiente

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

Prueba esto

$('#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>

Respuesta tardía, pero también puedes usar 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>

simplemente use el evento de clic mi ID de casilla de verificación es CheckAll

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

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

             alert(";)");
      }
    }

obtener valor de radio por nombre

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

No estoy seguro de por qué todo el mundo está haciendo esto tan complicado. Esto es todo lo que hice.

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

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

        }
        else {

        }

    })