Vérifier si la case n'est PAS cochée au clic - jQuery

86

Je veux vérifier si une case à cocher vient d'être décochée, lorsqu'un utilisateur clique dessus. La raison en est que je souhaite effectuer une validation lorsqu'un utilisateur décoche une case. Parce qu'au moins une case doit être cochée. Donc, s'il décoche le dernier, il se vérifie automatiquement à nouveau.

Avec jQuery, je peux facilement savoir s'il est vérifié ou non:

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

Mais je veux en fait seulement avoir une instruction if qui vérifie si une case à cocher vient d'être décochée.

J'ai donc pensé que je pourrais le faire avec le code suivant:

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

Mais cela affichera toujours le message «non coché». Pas vraiment ce à quoi je m'attendais ...

démo: http://jsfiddle.net/tVM5H/

Alors finalement j'ai besoin de quelque chose comme:

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

Mais évidemment cela ne fonctionne pas. Je préfère ne pas utiliser le premier exemple, car j'aurais alors une instruction «else» inutile alors que je n'ai besoin que d'une instruction «if».

Alors, première chose, est-ce un bogue jQuery? Parce que pour moi, c'est un comportement inattendu. Et deuxièmement, quelqu'un a-t-il des idées pour une bonne alternative?

w00
la source

Réponses:

50

La réponse déjà publiée fonctionnera. Si vous souhaitez utiliser jQuery: not, vous pouvez le faire:

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

ou

if ($(this).attr('checked') == false)
chris_code
la source
Le premier exemple de cette réponse semble le plus facile à lire de toutes les options, alors je vote pour cela.
Toby 1 Kenobi
5

jQuery pour vérifier vérifié? Vraiment?

if(!this.checked) {

N'utilisez pas de bazooka pour faire le travail d'un rasoir.

TheZ
la source
4
Si vous utilisez jQuery pour trouver l'élément, il devrait lire$(this)[0].checked
Chris
@HoldOffHunger Cela fait partie de l'élément d'entrée natif: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… Si vous utilisez jQuery, Chris a la syntaxe correcte dans le commentaire ci-dessus le vôtre.
TheZ
@TheZ: Bien! Oui, vous avez raison, la réponse de Chris est bonne. Suggestion: l'ajouter pour répondre avec crédit? Les réponses OP et top sont toutes deux orientées vers $ (selector) .is ('...'), qui est une pure solution jQuery. Utiliser uniquement .checkedlà où ils ont .is('checked')ne fonctionnera pas en soi.
HoldOffHunger
5
$(document).ready(function() {
        $("#check1").click(function() {
            var checked = $(this).is(':checked');
            if (checked) {
                alert('checked');
            } else {
                alert('unchecked');
            }
        });
    });
Nanhe Kumar
la source
2

Découvrez quelques-unes des réponses à cette question - je pense que cela pourrait s'appliquer à la vôtre:

comment exécuter la fonction de clic après le comportement par défaut d'un élément

Je pense que vous rencontrez une incohérence dans l'implémentation de la onclickfonction dans le navigateur . Certains choisissent de cocher la case avant le déclenchement de l'événement et d'autres après.

Nathan ami
la source
C'est aussi vraiment important.
TheZ
Et c'est pourquoi jQuery pour vérifier vérifié. Vraiment. ;)
JoeBrockhaus
1

La réponse a déjà été publiée, mais nous pouvons également utiliser la jquery de cette manière

démo

$(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
la source
0

Fais-le comme ça

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

// To check if checkbox is checked
if( $(this).attr("checked")=="checked")
Usman Younas
la source
Cela pourrait juste être this.checked. La première ligne n'a pas besoin de typeoflà (elle ne lèvera jamais a ReferencError). Vous devriez également utiliser prop()au lieu de attr(), qui renverra un booléen, ce qui rendra votre deuxième également redondant.
alex