JQuery Kochbuch (German Edition)

verbergen kann:


...

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

...

...

Same as Shipping

....

    Statt die Checkbox per CSS zu verbergen und per JavaScript anzuzeigen können Sie auch die Checkbox selbst per JavaScript dem DOM hinzufügen. Ich bevorzuge es zwar, HTML, CSS und JavaScript getrennt zu halten, aber manchmal ist die erstere die bessere Lösung:
var html_label = 'Same as Shipping';
var html_input = 'value="sameAsShipping" />';

$( html_label + html_input ).prependTo('#billingInfo").change( ... ).trigger( ... );

Automatisch Radio Buttons auswählen
    Problem
    Sie haben eine Reihe von Radio Buttons. Der letzte davon trägt das Label »Andere« und besitzt ein Texteingabefeld. Natürlich möchten Sie, dass der Radio Button ausgewählt wird, wenn der Anwender Text in das Feld »Andere« eingibt:

Wie sind Sie auf uns aufmerksam geworden?

    
• 
      
       Website oder Blog
      

    
• 
      
       Zeitschrift
      

    
• 
      
       Freunde
      

    
• 
      
       Andere
      
      

    Lösung 1
    Sie sehen im HTML-Code, dass der Radio Button, das Label und das zugehörige Texteingabefeld in einem

-Tag eingebettet sind. Diese Struktur ist nicht zwingend notwendig, aber es ist dadurch einfacher, den entsprechenden Radio Button zu finden – so können Sie sicher sein, dass es nur ein Geschwister-Element gibt, das diesen Typ aufweist:
// Texteingabefeld in der Liste chooseSource selektieren und auf blur lauschen
$('#chooseSource input:text').blur(function(){

    // wenn Textfeld etwas enthält
    if ( $(this).val() != '' ) {
     // Radio Button als Geschwisterelement finden und auswählen
     $(this).siblings('input:radio').attr('checked',true);
    }

});
    Lösung 2
    Man kann noch einen Schritt weitergehen und umgekehrt nach dem Auswählen des Radio Button für das Texteingabefeld
.focus()
aufrufen. Der folgende Code ersetzt den aus der vorigen Lösung vollständig. Anstatt die Methode
.blur()
zu nutzenund dann eine
.each()
-Methode anzuhängen, verwenden Sie nur die Methode
.each()
, da wir mit dieser Zugriff auf alle Objekte erhalten, die wir benötigen:
$('#chooseSource input:text').each(function(){

    // beide werden doppelt verwendet, daher speichern wir sie zwischen
    // Texteingabefeld
    var $inputTxt = $(this);
    // zugehöriger Radio Button
    var $radioBtn = $inputTxt.siblings('input:radio');

    // Auf das blur-Event des Textfeldes lauschen
    $inputTxt.blur(function(){
     // gibt es Text im Feld,
     if ( $inputTxt.val() != '' ) {
     // selektieren den Radio Button
     $radioBtn.attr('checked',true);
     }
    });

    // Auf das change-Event des Radio Button lauschen
    $radioBtn.change(function(){
     // wenn selektiert, Fokus auf Textfeld setzen
     if ( this.checked ) { $inputTxt.focus(); }
    });

}); // Ende von each()
    Diskussion
    Die jQuery-Methode
.sibling()
gibtnur Geschwister-Elemente zurück, aber nicht das HTML-Element, in dem Sie versuchen, Geschwister zu finden. Daher ließe sich der Code
$(this).siblings('input: radio ')
auch schreiben als
$(this).siblings('input')
, da es nur ein anderes Eingabefeld als Geschwister-Element gibt. Ich ziehe aber den Selektor
:radio
vor, da dies expliziter ist und sich zudem selbst beschreibt.
    Es wäre sehr einfach, das Texteingabefeld zu »Andere« mit
$('#source5txt').focus(...)
und den Radio Button über sein Attribut
id
direkt anzusprechen. Dies funktioniert zwar, aber der gezeigte Code ist flexibler. Was geschieht sonst, wenn jemand die
id
des Radio Button »Andere« ändert? Was, wenn jeder Radio Button ein Texteingabefeld bekommt? Die abstrakte Lösung kümmert sich ohne Mehraufwand auch um diesen