Compruebe si la casilla de verificación NO está marcada al hacer clic - jQuery

86

Quiero comprobar si una casilla de verificación acaba de quedar sin marcar, cuando un usuario hace clic en ella. La razón de esto es porque quiero hacer una validación cuando un usuario desmarca una casilla de verificación. Porque es necesario marcar al menos una casilla de verificación. Entonces, si desmarca el último, automáticamente se vuelve a verificar.

Con jQuery puedo averiguar fácilmente si está marcado o no:

$('#check1').click(function() {
    if($(this).is(':checked'))
        alert('checked');
    else
        alert('unchecked');
});

Pero en realidad solo quiero tener una declaración if que verifique si una casilla de verificación acaba de estar desmarcada.

Entonces pensé que podría hacer eso con el siguiente código:

$('#check2').click(function() {
    if($(this).not(':checked'))
        alert('unchecked');
    else
        alert('checked');
});

Pero esto siempre mostrará el mensaje "sin marcar". No es realmente lo que esperaba ...

demostración: http://jsfiddle.net/tVM5H/

Así que eventualmente necesito algo como:

$('#check2').click(function() {
    if($(this).not(':checked')) {
        // Got unchecked, so something!!!
    }
});

Pero obviamente esto no funciona. Prefiero no usar el primer ejemplo, porque entonces tendría una instrucción 'else' innecesaria cuando solo necesito una instrucción 'if'

Entonces, lo primero, ¿es esto un error de jQuery? Porque para mí es un comportamiento inesperado. Y en segundo lugar, ¿alguien quiere una buena alternativa?

w00
fuente

Respuestas:

50

La respuesta ya publicada funcionará. Si desea utilizar jQuery: no, puede hacer esto:

if ($(this).is(':not(:checked)'))

o

if ($(this).attr('checked') == false)
chris_code
fuente
El primer ejemplo en esta respuesta parece el más fácil de leer de todas las opciones, así que voto por eso.
Toby 1 Kenobi
5

jQuery para comprobar si está marcado? De Verdad?

if(!this.checked) {

No uses una bazuca para hacer el trabajo de una navaja.

TheZ
fuente
4
Si usa jQuery para encontrar el elemento, debería leer$(this)[0].checked
Chris
@HoldOffHunger Es parte del elemento de entrada nativo: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… Si está usando jQuery, Chris tiene la sintaxis correcta en el comentario sobre el suyo.
TheZ
@TheZ: ¡Bien! Sí, tienes razón, la respuesta de Chris es buena. Sugerencia: ¿Agregarlo para responder con crédito? Tanto OP como las respuestas principales se inclinan hacia $ (selector) .is ('...'), que es una solución pura de jQuery. Usar solo .checkeddonde tienen .is('checked')no funcionará por sí solo.
HoldOffHunger
5
$(document).ready(function() {
        $("#check1").click(function() {
            var checked = $(this).is(':checked');
            if (checked) {
                alert('checked');
            } else {
                alert('unchecked');
            }
        });
    });
Nanhe Kumar
fuente
2

Consulte algunas de las respuestas a esta pregunta; creo que podría aplicarse a la suya:

cómo ejecutar la función de clic después del comportamiento predeterminado de un elemento

Creo que se está encontrando con una inconsistencia en la implementación del navegador de la onclickfunción. Algunos eligen alternar la casilla de verificación antes de que se active el evento y otros después.

Amigo nathan
fuente
Esto también es realmente importante.
TheZ
Y es por eso que jQuery debe verificarlo. De Verdad. ;)
JoeBrockhaus
1

La respuesta ya se publicó. Pero también podemos usar jquery de esta manera

manifestación

$(function(){
    $('#check1').click(function() {
        if($('#check1').attr('checked'))
            alert('checked');
        else
            alert('unchecked');
    });

    $('#check2').click(function() {
        if(!$('#check2').attr('checked'))
            alert('unchecked');
        else
            alert('checked');
    });
});
Praveen04
fuente
0

Hazlo asi

if (typeof $(this).attr("checked") == "undefined" )

// To check if checkbox is checked
if( $(this).attr("checked")=="checked")
Usman Younas
fuente
Esto podría ser simplemente this.checked. La primera línea no necesita typeofallí (nunca generará a ReferencError). También debería usar en prop()lugar de attr(), que devolverá un booleano, lo que hace que su segundo también sea redundante.
alex