jQuery checkbox cambiar y hacer clic en evento

yo tengo

 

y

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

Enlace JSFIDDLE

Aquí el evento cambiado actualiza el valor del cuadro de texto con el estado de la checkbox. Uso el evento click para confirmar la acción al desmarcar. Si el usuario selecciona cancelar, la marca de verificación se restablece pero el cambio incluso se dispara antes de la confirmación, dejando las cosas en un estado incoherente (el cuadro de texto dice falso cuando la checkbox está marcada). ¿Cómo puedo lidiar con la cancelación y mantener el valor del cuadro de texto en consonancia con el estado de verificación?

Bueno, no veo una respuesta que coincida con la mía, así que voy a publicar esto. 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 a una checkbox.

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

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

Manifestación

Use 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 detectarán (presumiblemente) si usa . Esto significa que cuando haga clic en la etiqueta, marcará la casilla en lugar de hacer clic directamente en la checkbox. (No es exactamente la pregunta, pero varios resultados de búsqueda tienden a venir aquí)

 


The confirm result:

En ese 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 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 JSFiddle con el último jQuery 2.x

  • Se agregaron ejemplos de jsfiddle y html con la etiqueta de checkbox en la que se puede hacer clic.

Bueno … solo por salvar un dolor de cabeza (pasada la medianoche aquí), podría llegar a:

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

Espero eso ayude

Para mí esto funciona genial:

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

Aquí estás

Html

  

JavaScript

  

Deshágase del evento de cambio y cambie el valor del cuadro de texto en el evento click. En lugar de devolver el resultado de la confirmación, tómalo en una var. Si es verdadero, cambie el valor. Luego devuelve la var.

La checkbox hacer clic y verificar el valor en el mismo bucle de evento es el problema.

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/

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

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

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

simplemente use clic evento mi id de checkbox es CheckAll

  $('#CheckAll').click(function () { if ($('#CheckAll').is(':checked') == true) { alert(";)"); } } 

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

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

obtener valor de radio por nombre

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