smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

jQuery: 4 Ansätze den Zustand einer Checkbox zu ermitteln

18. Februar 2013
Stephan
JavaScript - jQuery: Zustand einer Checkbox ermitteln

Mit jQuery testen, ob eine Checkbox vom Benutzer selektiert wurde oder nicht: klingt einfach und ist es (wenn man weiß wie) an sich auch.

Nichtsdestotrotz musste ich dann letztens doch ein wenig googlen, da mein erster Ansatz leider nicht so funktionierte wie ich anfangs dachte.

Falls ihr also mal vor dem gleichen Problem stehen solltet, kann der folgende Artikel sehr hilfreich für euch sein. Im Folgenden zeige ich euch 4 simple Ansätze bzw. Möglichkeiten den Zustand einer Checkbox mit jQuery zu ermitteln.

1. Ansatz

Die erste Möglichkeit, die wahrscheinlich den meisten von uns als erstes einfällt, beruht auf der Verwendung der attr-Funktion von jQuery:

if($('#myCheckbox').attr('checked') === 'checked')
{
    console.log('Checkbox ist selektiert!');
}

Mein Fehler hierbei war, dass ich dachte, dass true oder false, also ein Boolean-Wert, zurückgeliefert wird, was jedoch nicht der Fall ist.

2. Ansatz

Hier nutzen wir die is-Funktion:

if($('#myCheckbox').is(':checked'))
{
    console.log('Checkbox ist selektiert!');
}

3. Ansatz

Bei diesem Ansatz nutzen wir als Selektor nicht allein die ID der Checkbox, sondern zusätzlich den Pseudoklassen-Selektor :checked. In diesem Fall findet jQuery das Element bzw. die Checkbox nur wenn sie selektiert ist. Dabei können wir uns length zu Nutze machen:

if($('#myCheckbox:checked').length === 1)
{
    console.log('Checkbox ist selektiert!');
}

4. Ansatz

Analog zur vorherigen Möglichkeit aber anstatt length prüfen wir den eigentlichen Wert:

if($('#myCheckbox:checked').val() === 'on')
{
    console.log('Checkbox ist selektiert!');
}

Fazit

Wie ihr seht gibt es mehrere jQuery-Ansätze den Zustand einer Checkbox zu ermitteln. Ich persönlich favorisiere den Ansatz mit is.

Kennt ihr noch weitere Möglichkeiten? Wie testet ihr im Normalfall in JavaScript bzw. mithilfe von jQuery, ob eine Checkbox selektiert ist oder nicht?

Kommentare  
2 Kommentare vorhanden
1 JonasB schrieb am 18. Februar 2013 um 18:20 Uhr

Hehe, da muss ich auch immer googeln. Noch umständlicher ist es, wenn kein jQuery verfügbar ist. Ich benutze in der Regel den 1. Ansatz mit attr(). Diese Psedo-Klassen Selektoren sind mir irgendwie suspekt.

Aber wenn ich es so untereinander sehe, finde ich die 2. Variante eigentlich nicht schlecht. Ist kurz, aber gut lesbar und man sieht auf einen Blick was abgefragt wird.

Ist wohl einfach Gewöhnugssache 🙂

2 Stephan L. schrieb am 19. Februar 2013 um 16:16 Uhr

Eigentlich bin ich auch nicht wirklich der Fan von Pseudoklassen gewesen, da die früher nicht wirklich Cross-Browser kompatibel waren. Inzwischen scheint das aber nicht mehr so das Problem zu sein, so dass ich die mittlerweise recht häufig einsetze. 😉

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!