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

564

$(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?

Profesor caos
fuente
1
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.
kasdega
No es el mejor, pero creo que está funcionando para mí aquí: http://jsfiddle.net/Skooljester/2Xxcn/ .
ayyp

Respuestas:

904

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'));        
    });
});
Kasdega
fuente
128
Solo una nota, es mucho más rápido de usar en this.checkedlugar de $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5
Dakota
37
@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 el código. Gracias.
Mike U
51
@MikeU: De acuerdo con usted en la optimización prematura, pero teniendo en cuenta que this.checkedes mucho más corto de escribir + javascript nativo, podría valer la pena usarlo en general (aparte de ser ~ 200 a 300 veces más rápido).
Levite
11
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
2
Creo que [esto] en $ ('# textbox1'). Val (this.checked); se refiere al documento Debe ser $ ('# textbox1'). Val ($ ('# checkbox1'). Is (': marcado'));
yurin
90

Manifestación

Utilizar mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});
Joseph Marikle
fuente
Muestra la alerta cuando la verifica y siempre me impide comprobarla 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 al seleccionar ok no se marca la casilla.
Profesor Chaos
1
Funciona cuando se usa el mouse, pero no si lo está verificando con el teclado.
viernes
3
@frinux Eso es simplemente porque es una pregunta relacionada con el mouse. No desestime las respuestas en función de su relevancia para cuestiones completamente distintas. Si tiene un problema para activar el estado de un indicador después de marcar una casilla de verificación mediante el teclado, publique una pregunta al respecto en lugar de rechazar las respuestas descuidadamente.
Joseph Marikle
3
Votado negativamente ya que el mousedown no es la única forma en que un usuario puede interactuar con la casilla de verificación.
Jonathan
51

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
lko
fuente
1
Es #OuterDivOrBody no .OuterDivOrBody :)
Laurent Brieu
24

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

zarun
fuente
11

Para mí esto funciona muy bien:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})
Chris
fuente
44
Encontré esto a través de una búsqueda en la web. Debería usar 'prop' en lugar de 'attr' >> api.jquery.com/prop
Dr Schizo
11

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>
Desarrollador
fuente
6

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.

yoozer8
fuente
6

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/

Mrchief
fuente
6

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

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

Prueba esto

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });
ShankarSangoli
fuente
5
$(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'));
            }
        }
    });
});
Jason
fuente
4
// 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;
    });
});
Marcelo De Zen
fuente
4
$('#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>
usuario3636759
fuente
4

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>

CONvid19
fuente
1

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

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

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

             alert(";)");
      }
    }
Geeti
fuente
1

obtener valor de radio por nombre

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

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"); }
CharlotteOswald
fuente
-1
 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })
Hari Lakkakula
fuente
3
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