cambio de casilla de verificación de jQuery y haga 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 suelo .click() para confirmar la acción al desmarcar. Si el usuario selecciona cancelar, la marca de verificación se restaura pero .change() dispara 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 lidiar con la cancelación y mantener el valor del cuadro de texto consistente con el estado de verificación?

preguntado el 11 de agosto de 11 a las 15:08

Funciona en FF y Chrome y tiene el comportamiento explicado en IE 8. Por lo tanto, puede ser importante tener en cuenta en qué navegadores necesita que funcione y en cuáles está viendo el error. -

No es lo mejor, pero creo que me está funcionando aquí: http://jsfiddle.net/Skooljester/2Xxcn/. -

20 Respuestas

Probado en JSFiddle y hace lo que está pidiendo. Este enfoque tiene el beneficio adicional de activarse 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'));        
    });
});

Respondido 21 ago 19, 09:08

Solo una nota, es mucho más rápido de usar this.checked en lugar de $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5 - Dakota

@Dakota De acuerdo, es mucho más lento, pero todavía estamos hablando de 600k operaciones / seg. Entonces, 600 veces por milisegundo. Creo que si esto comienza a causar problemas de rendimiento en su página web, es posible que deba volver a evaluar su javascript;) Sin embargo, es bueno comprender las métricas de rendimiento con código. Gracias. - mike tu

@MikeU: Estoy de acuerdo contigo sobre la optimización prematura, pero considerando que this.checked es mucho más corto para escribir + javascript nativo, podría valer la pena usarlo en general (además de ser ~ 200 a 300 veces más rápido). - Levita

Recomendaría .prop () en lugar de .attr () ya que este último no funciona en todos los casos y creo que jQuery recomienda .prop () ahora. - kabadisha

Creo que [esto] en $ ('# textbox1'). Val (this.checked); se refiere al documento. Debe ser $ ('# textbox1'). Val ($ ('# checkbox1'). Is (': comprobado')); - yurín

Demo

Utiliza la mousedown

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

Respondido el 20 de junio de 20 a las 10:06

Muestra la alerta al comprobarlo y siempre me impide comprobarlo de hecho. Esto está en Chrome. - pimvdb

igual que @pimvdm. La confirmación aparece incluso para la acción de verificación (solo debería aparecer para desmarcar) y seleccionar Aceptar no da como resultado que se marque la casilla. - Profesor Caos

Funciona cuando se usa el mouse, pero no si lo está verificando con el teclado. - frinux

@frinux Eso es simplemente porque es una pregunta relacionada con el mouse. Por favor, no desestime las respuestas basadas en su relevancia para temas completamente separados. Si tiene un problema para activar el estado de un indicador después de marcar una casilla de verificación a través del teclado, publique una pregunta al respecto en lugar de votar negativamente las respuestas por descuido. - jose marikle

Votado en contra ya que el mousedown no es la única forma en que un usuario puede interactuar con la casilla de verificación. - Jonathan

La mayoría de las respuestas no lo captarán (presumiblemente) si usa <label for="cbId">cb name</label>. Esto significa que cuando haga clic en la etiqueta, se 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 aparecer 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ía utilizar:

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

Respondido 02 ago 17, 15:08

Es #OuterDivOrBody no .OuterDivOrBody :) - laurent brieu

Sé que esto es SUPER ANTIGUO, pero lo encontré buscando otra cosa y quería hacerle saber que en el segundo ejemplo (no verifiqué el primer violín) si la persona hace clic en cancelar, todavía está desmarcando y mostrando falso, si cancelan, debe dejarlo marcado y decir verdadero. Por si acaso quieres arreglarlo. - GµårÐïåñ

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

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

Espero eso ayude

Respondido 11 ago 11, 19:08

Para mí esto funciona muy bien:

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

Respondido 20 ago 13, 10:08

Encontré esto a través de una búsqueda en la web. Deberías usar 'prop' en lugar de 'attr' >> api.jquery.com/prop - Dr. Schizo

Aquí tiene

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>

Respondido 10 Jul 14, 14:07

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>

Respondido el 29 de Septiembre de 20 a las 22:09

gracias, las respuestas anteriores son para muchos detalles, la suya es simple y suficiente. Gracias - Basheer AL-MOMANI

Deshazte del evento de cambio y, en su lugar, cambia el valor del cuadro de texto en el evento de clic. En lugar de devolver el resultado de la confirmación, captúrelo en una var. Si es cierto, cambie el valor. Luego devuelve la var.

Respondido 11 ago 11, 19:08

Haga clic en la casilla de verificación y comprobar el valor en el mismo bucle de eventos 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/

Respondido 11 ago 11, 20:08

si está utilizando iCheck Jquery, utilice el siguiente código

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

Respondido el 29 de enero de 18 a las 12:01

Prueba esta

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

Respondido 11 ago 11, 19:08

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

Respondido 11 ago 11, 20:08

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

Respondido 10 Feb 12, 17:02

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

respondido 06 nov., 14:05

obtener valor de radio por nombre

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

Respondido el 01 de diciembre de 16 a las 17:12

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

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

contestado el 03 de mayo de 17 a las 11:05

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

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

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

             alert(";)");
      }
    });

Respondido 03 Abr '21, 03:04

Trata

checkbox1.onclick= e => {
  if(!checkbox1.checked) checkbox1.checked = !confirm("Are you sure?");
  textbox1.value = checkbox1.checked;
}
<input type="checkbox" id="checkbox1" /><br />
<input type="text" id="textbox1" value='false'/>

Respondido el 22 de junio de 20 a las 09:06

Prueba esto:

    let checkbox = document.getElementById('checkboxId');
    if (checkbox.checked != true)
    {
        alert("select checkbox");
    }

Respondido 12 Oct 20, 13:10

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

        }
        else {

        }

    })

Respondido el 29 de enero de 20 a las 05:01

Las respuestas de solo código se consideran de baja calidad: asegúrese de proporcionar una explicación de lo que hace su código y cómo resuelve el problema. Ayudará tanto al autor de la pregunta como a los futuros lectores si puede agregar más información en su publicación. Consulte también Explicación de respuestas completamente basadas en código: meta.stackexchange.com/questions/114762/… - borchvm

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.