Aktivieren Sie das Kontrollkästchen NICHT, wenn Sie auf click - jQuery klicken

85

Ich möchte überprüfen, ob ein Kontrollkästchen gerade deaktiviert wurde, wenn ein Benutzer darauf klickt. Der Grund dafür ist, dass ich eine Validierung durchführen möchte, wenn ein Benutzer ein Kontrollkästchen deaktiviert. Weil mindestens ein Kontrollkästchen aktiviert sein muss. Wenn er also den letzten deaktiviert, überprüft er sich automatisch erneut.

Mit jQuery kann ich leicht herausfinden, ob es überprüft wurde oder nicht:

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

Aber ich möchte eigentlich nur eine if-Anweisung haben, die prüft, ob ein Kontrollkästchen gerade deaktiviert wurde.

Also dachte ich, ich könnte das mit dem folgenden Code machen:

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

Dies zeigt jedoch immer die Meldung "nicht markiert" an. Nicht wirklich das, was ich erwartet hatte ...

Demo: http://jsfiddle.net/tVM5H/

Also brauche ich irgendwann so etwas wie:

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

Aber das funktioniert natürlich nicht. Ich möchte lieber nicht das erste Beispiel verwenden, da ich dann eine unnötige 'else'-Anweisung hätte, wenn ich nur eine' if'-Anweisung benötige.

Ist das als erstes ein jQuery-Fehler? Für mich ist es unerwartetes Verhalten. Und zweitens, hat jemand eine Idee für eine gute Alternative?

w00
quelle

Antworten:

160

Versuche dies:

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

Demo

Antyrat
quelle
50

Die bereits gepostete Antwort wird funktionieren. Wenn Sie jQuery verwenden möchten: nicht, können Sie dies tun:

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

oder

if ($(this).attr('checked') == false)
chris_code
quelle
Das erste Beispiel in dieser Antwort scheint aus allen Optionen am einfachsten zu lesen zu sein, deshalb stimme ich dafür.
Toby 1 Kenobi
5

jQuery auf geprüft prüfen? "Ja wirklich?"

if(!this.checked) {

Verwenden Sie keine Panzerfaust, um die Arbeit eines Rasierers zu erledigen.

Das Z
quelle
4
Wenn Sie jQuery verwenden, um das Element zu finden, sollte es lauten$(this)[0].checked
Chris
@HoldOffHunger Es ist Teil des nativen Eingabeelements: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… Wenn Sie jQuery verwenden, hat Chris die richtige Syntax im obigen Kommentar.
TheZ
@ TheZ: Schön! Ja, du hast recht, die Antwort von Chris ist gut. Vorschlag: Fügen Sie es hinzu, um mit Kredit zu antworten? Sowohl OP- als auch Top-Antworten tendieren zu $ ​​(Selektor) .is ('...'), einer reinen jQuery-Lösung. Nur dort zu verwenden, .checkedwo sie sind .is('checked'), funktioniert nicht von alleine.
HoldOffHunger
5
$(document).ready(function() {
        $("#check1").click(function() {
            var checked = $(this).is(':checked');
            if (checked) {
                alert('checked');
            } else {
                alert('unchecked');
            }
        });
    });
Nanhe Kumar
quelle
2

Schauen Sie sich einige der Antworten auf diese Frage an - ich denke, es könnte auf Ihre zutreffen:

Ausführen der Klickfunktion nach dem Standardverhalten eines Elements

Ich denke, Sie stoßen auf eine Inkonsistenz in der Browser-Implementierung der onclickFunktion. Einige aktivieren das Kontrollkästchen, bevor das Ereignis ausgelöst wird, andere danach.

Nathan Freund
quelle
Das ist eigentlich auch sehr wichtig.
TheZ
Und deshalb muss jQuery überprüft werden. Ja wirklich. ;)
JoeBrockhaus
1

Die Antwort wurde bereits veröffentlicht. Aber wir können die Abfrage auch auf diese Weise verwenden

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
quelle
0

Mach es so

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

// To check if checkbox is checked
if( $(this).attr("checked")=="checked")
Usman Younas
quelle
Das könnte einfach sein this.checked. Die erste Zeile wird dort nicht benötigt typeof(es wird niemals a ausgelöst ReferencError). Sie sollten auch prop()anstelle von verwenden attr(), wodurch ein Boolescher Wert zurückgegeben wird, wodurch Ihr zweiter ebenfalls redundant wird.
Alex