JQuery Kochbuch (German Edition)

$toggle.siblings('input:checkbox');

    // Auf das change-Event des Umschalters lauschen
    $toggle.change(function(){
     if ( this.checked ) {
     // Wenn markiert, alle Checkboxen selektieren
     $checkboxes.attr('checked','checked');
     } else {
     // Wenn nicht markiert, alle Checkboxen deselektieren
     $checkboxes.removeAttr('checked');
     }
    });

    // Auf das change-Event der einzelnen Checkboxen lauschen
    // ohne Umschalt-Checkbox
    $checkboxes.change(function(){
     if ( this.checked ) {
     // sind diese und alle anderen selektiert, Umschalter auch
     // selektieren
     if ( $checkboxes.length == $checkboxes.filter(':checked').length ) {
     $toggle.attr('checked','checked');
     }
     } else {
     // wenn nicht, Umschalter deselektieren
     $toggle.removeAttr('checked');
     }
    }).eq(0).trigger('change'); // Ende von change(), dann change nur für
     // erste Checkbox aufrufen
}); // Ende von each()
    Diskussion
    Mit
.eq(0).trigger('change')
wird direkt das
.change()
-Eventder ersten Checkbox ausgelöst. Damit wird der Status des Umschalters gesetzt und man ist unabhängig vom Browser, da Firefox und andere Browser sich den Status von Radio Buttons und Checkboxen merken, wenn die Seite aktualisiert wird.
.eq(0)
dient dazu, nur das Change-Event der ersten Checkbox auszulösen. Ohne
.eq(0)
würde
.trigger('change')
für jede Checkbox ausgelöst. Da sie aber alle den gleichen Umschalter haben, brauchen Sie das Event nur einmal auszuführen.
    Was geschieht, wenn JavaScript abgeschaltet ist? Sie sollten die Umschalt-Checkbox und das Label standardmäßig per CSS ausblenden. Mit JavaScript fügen Sie dann einem Eltern-Element einen Klassennamen hinzu, der die vorige CSS-Regel überschreibt:


...

// wenn das HTML-DOM bereit ist
$(document).ready(function(){
    $('form').addClass('jsEnabled');
});

Auswahl-Optionen hinzufügen und entfernen
    Problem
    Sie haben eine Auswahlliste für Farben und wollen neue Einträge hinzufügen, aber auch welche entfernen.
Farben

    Blau
    Braun
    Schwarz


Ausgewählte Farbe(n) entfernen

Neue Farbe (Name)


Neue Farbe (Wert)


Neue Farbe hinzufügen
    Lösung
    Um der Auswahlliste eine neue Option hinzuzufügen, verwenden Sie die Methode
.appendTo()
:
// Den Button "Neue Farbe hinzufügen" selektieren
$('#add').click(function(event){
    event.preventDefault();

    var optionName = $('#newColorName').val();
    var optionValue = $('#newColorValue').val();

    $('').attr('value',optionValue).text(optionName).appendTo('#colors');
});
    Um eine Option zu entfernen, nutzen Sie die Methode
.remove()
:
// Den Button "Ausgewählte Farbe(n) entfernen" selektieren
$('#remove').click(function(event){
    event.preventDefault();

    var $select = $('#colors');

    $('option:selected',$select).remove();
});
    Diskussion
    Ich verwende die Methoden
.attr()
und
.text()
,um das Element

mit Leben zu füllen:
$('').attr("value",optionValue).text(optionName).appendTo('#colors');
    Die gleiche Zeile könnte man auch so schreiben, dass das

-Element in einem Schritt erstellt wird:
$(''+optionName+'').appendTo('#colors');
    Durch das Verbinden aller Daten für

ist man vielleicht einen Bruchteil einer Millisekunde schneller, nur merkt das der Anwender nicht wirklich. Ich ziehe dann doch die Methoden
.attr()
und
.text()
vor, um das

-Element mit Leben zu füllen, denn der resultierende Code ist lesbarer und lässt sich auch leichter debuggen und warten. Da die Performance hier keinen Unterschied aufweist, liegt die Entscheidung also beim Entwickler.
    Was geschieht, wenn JavaScript abgeschaltet ist? Sie brauchen dann eine Alternative auf dem Server, der das Anklicken der Buttons verarbeitet. Der Benutzer muss dann entsprechend warten, bis die Seite neu geladen ist.

Abhängig von der Anzahl der Zeichen ins nächste Feld springen
    Problem
    Sie haben eine form, in dem die Anweder ein Produkt online registrieren können. Dabei muss eine Seriennummer eingegeben werden, die auf den Installations-CDs steht. Diese Nummer ist 16