Verifique se a caixa de seleção NÃO está marcada ao clicar - jQuery

86

Quero verificar se uma caixa de seleção acaba de ser desmarcada, quando um usuário clica nela. A razão para isso é porque eu quero fazer uma validação quando um usuário desmarca uma caixa de seleção. Porque pelo menos uma caixa de seleção precisa ser marcada. Portanto, se ele desmarcar o último, ele se auto-verifica novamente.

Com o jQuery, posso descobrir facilmente se está marcado ou não:

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

Mas, na verdade, eu só quero ter uma instrução if que verifique se uma caixa de seleção acabou de ser desmarcada.

Então pensei que poderia fazer isso com o seguinte código:

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

Mas isso sempre mostrará a mensagem 'desmarcada'. Não é exatamente o que eu esperava ...

demonstração: http://jsfiddle.net/tVM5H/

Então, eventualmente, preciso de algo como:

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

Mas obviamente isso não funciona. Prefiro não usar o primeiro exemplo, porque então eu teria uma instrução 'else' desnecessária quando só preciso de uma instrução 'if'.

Então, em primeiro lugar, isso é um bug do jQuery? Porque para mim é um comportamento inesperado. E em segundo lugar, alguém quer uma boa alternativa?

w00
fonte

Respostas:

161

Experimente isto:

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

demo

antirata
fonte
50

A resposta já postada funcionará. Se você quiser usar o jQuery: not, você pode fazer o seguinte:

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

ou

if ($(this).attr('checked') == false)
chris_code
fonte
O primeiro exemplo nesta resposta parece o mais fácil de ler de todas as opções, por isso voto a favor.
Toby 1 Kenobi,
5

jQuery para verificar verificado? Realmente?

if(!this.checked) {

Não use uma bazuca para fazer o trabalho de uma navalha.

TheZ
fonte
4
Se estiver usando jQuery para encontrar o elemento, deve ler$(this)[0].checked
Chris
@HoldOffHunger Faz parte do elemento de entrada nativo: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… Se você estiver usando jQuery, Chris tem a sintaxe correta no comentário acima do seu.
TheZ
@TheZ: Legal! Sim, você está certo, a resposta do Chris é boa. Sugestão: Adicionar para responder com crédito? Tanto o OP quanto as principais respostas tendem para $ (selector) .is ('...'), que é uma solução jQuery pura. Usar apenas .checkedonde eles .is('checked')não funcionará por si só.
HoldOffHunger
5
$(document).ready(function() {
        $("#check1").click(function() {
            var checked = $(this).is(':checked');
            if (checked) {
                alert('checked');
            } else {
                alert('unchecked');
            }
        });
    });
Nanhe Kumar
fonte
2

Confira algumas das respostas a esta pergunta - acho que pode se aplicar à sua:

como executar a função de clique após o comportamento padrão de um elemento

Acho que você está encontrando uma inconsistência na implementação da onclickfunção no navegador . Alguns optam por alternar a caixa de seleção antes de o evento ser disparado e alguns depois.

Amigo nathan
fonte
Isso também é muito importante.
TheZ
E é por isso que jQuery para verificar verificado. Realmente. ;)
JoeBrockhaus
1

A resposta já foi postada. Mas podemos usar o jquery dessa forma também

demo

$(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
fonte
0

Faça isso deste modo

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

// To check if checkbox is checked
if( $(this).attr("checked")=="checked")
Usman Younas
fonte
Isso poderia ser apenas this.checked. A primeira linha não precisa typeofdisso (ela nunca gerará a ReferencError). Você também deve usar em prop()vez de attr(), que retornará um booleano, tornando o segundo também redundante.
alex