JQuery Kochbuch (German Edition)

Fall.
    Warum nutzen wir bei dem Texteingabefeld
.blur()
und nicht
.focus()
? Nun,
.focus()
würde den zugehörigen Radio Button auch beim Springen per Tab-Taste durch die Form selektieren, während mittels
.blur()
und der Werteprüfung dieses Problem vermieden wird.
    Was geschieht, wenn JavaScript abgeschaltet ist? Der Anwender muss dann selbst in das Texteingabefeld klicken und den Radio Button selektieren. Sie müssen sich dann noch auf dem Server darum kümmern, was passieren soll, wenn zwar Text eingegeben, aber ein anderer Radio Button selektiert wurde.

(De)selektieren aller Checkboxen durch Links
    Problem
    Sie wollen alle Checkboxen durch eigene Links selektieren oder deselektieren:

    

Gründe zum Glücklichsein

Alle wählen Alle abwählen
    Ich bin aufgewacht

    
    Meine Gesundheit

    
    Meine Familie

    
    Die Sonne scheint

    Lösung
    Sprechen Sie die Links zum Wählen und Abwählen direkt über ihre Klassen an. Dann weisen sie die passenden
.click()
-Handler zu:
// Den Link "Alle wählen" in einem Fieldset
// für das Click-Event selektieren
$('fieldset .selectAll').click(function(event){
    event.preventDefault();
    // Alle Checkboxen finden und selektieren
    $(this).siblings('input:checkbox').attr('checked','checked');
});

// Den Link "Alle abwählen" in einem Fieldset
// für das Click-Event selektieren
$('fieldset .deselectAll').click(function(event){
    event.preventDefault();
    // Alle Checkboxen finden und deselektieren
    $(this).siblings('input:checkbox').removeAttr('checked');
});
    Diskussion
    Sind Sie daran interessiert, die Links zu aktivieren oder zu deaktivieren, dannsollten Sie einen Blick auf (De)selektieren aller Checkboxen über einen einzelnen Umschalter werfen. In der Lösung aktualisieren die einzelnen Checkboxen den Toggle-Status und Sie brauchen diese Logik, um die Links entsprechend zu aktivieren oder zu deaktivieren.
    Was geschieht, wenn JavaScript abgeschaltet ist? Sie sollten die Links standardmäßig per CSS verbergen. Dann nutzen Sie JavaScript, um einem Eltern-Element einen Klassennamen hinzuzufügen, durch den die vorige CSS-Regel überschrieben wird:


...

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

(De)selektieren aller Checkboxen über einen einzelnen Umschalter
    Problem
    Sie wollen alle Checkboxen über einen einzelnen Umschalter selektieren oder deselektieren. Hier soll dieser Umschalter eine andere Checkbox sein. Zusätzlich soll dieser Umschalter automatisch seinen Status ändern, wenn einige (oder alle) Checkboxen einzeln ausgewählt werden:

    

Gründe zum Glücklichsein

Alle wählen
    Ich bin aufgewacht

    
    Meine Gesundheit

    
    Meine Familie

    
    Die Sonne scheint

    Lösung
    Greifen Sie auf den Umschalter direkt über sein Attribut
class
und über den Selektor
:checkbox
zu. Dann durchlaufen Sie jeden gefundenen Umschalter, bestimmen die zugehörigen Checkboxen über
.siblings()
und fügen die Event-Listener für
change
hinzu:
// Den Umschalter "Alle wählen" in einem Fieldset finden,
// durch alle durchlaufen
$('fieldset .toggle:checkbox').each(function(){

    // wird mehr als einmal genutzt, daher Zwischenspeichern
    // der Umschalt-Box
    var $toggle = $(this);
    // die anderen Checkboxen
    var $checkboxes =