Sollen in einem Form vorgegebene Werte zur Auswahl gestellt werden, so kann dies mit Hilfe von Checkbox-Elementen geschehen. Bei der Checkbox kann der Benutzer – anders als bei Radio-Buttons, wo aus einer Gruppe von Optionen nur eine einzige ausgewählt werden kann – mehrere Elemente gleichzeitig auswählen. Zum Zugriff auf Checkbox-Elemente in einem Formular hat man grundsätzlich zwei Möglichkeiten.
Die erste besteht darin, dass der Name einer Gruppe von Checkboxen zum Ansprechen verwendet wird. Hierbei kann mit der Length-Eigenschaft die Anzahl der Elemente gleichen Namens abgefragt werden. Zur Gruppierung von Checkboxen wird bei der Definition der Checkbox-Eingabeelemente jeder einer Gruppe zugehörigen Checkbox der selbe Name zugewiesen. Über diesen Namen kann nun auf die Checkboxen, die als Elementknoten in einem Array gespeichert sind, zugegriffen werden.
Eine weitere Möglichkeit besteht mittels Elements-Objekt. Hier kann jedes Element im Formular durchgegangen werden und über dessen Typ- und Namenseigenschaften identifiziert werden. Das Elements-Objekt ist ein Kindobjekt des Form-Objekts, welches durch das Document Object angesprochen werden kann.
Im ersten Beispiel zu Checkboxen wird die erstgenannte Zugriffsart verwendet. Die Function checkbox_checked_alert() testet die Stati der Checkboxen mit den Namen nutzungsart. Auf die einzelnen Checkbox-Elemente wird mit dem Vektoroperator in einer For-Schleife zugegriffen, wobei die Anzahl der Elemente mit dem Namen nutzungsart über die Length-Eigenschaft ermittelt wird.
In einem String werden Informationen zum Checked-Status und die Value-Eigenschaft der im Formular enthaltenen Checkbox-Elemente mit Namen nutzungsart gespeichert. Die auf diese Weise gesammelten Informationen werden am Ende der Funktion in einer Alert-Box ausgegeben.
<form name="formular"> Nutzung des Computers:<br> <input type="checkbox" name="nutzungsart" value="arbeiten"> Arbeit<br> <input type="checkbox" name="nutzungsart" value="multimedia"> Audio / Video<br> <input type="checkbox" name="nutzungsart" value="spielen"> Spielen<br> <input type="button" onclick="checkbox_checked_alert ()" value="Status abfragen"> <script language="javascript" type="text/javascript"> <!-- // JavaScript-Bereich für ältere Browser auskommentieren // Funktion prüft die Checkbox-Elemente der Form auf ihren Status und // gibt die in einem String zusammengefassten Informationen in einer // Alert-Box aus. function checkbox_checked_alert () { // Zeichenkette für die Ergebnisausgabe initialisieren var ergebnisstring = ''; // Jedes Element im Formular durchgehen, welches den Namen ergebnis trägt. for (var i = 0; i < document.formular.nutzungsart.length; i++) // Wenn das aktuelle Eingabeelement eine Checkbox ist... if (document.formular.nutzungsart[i].type == 'checkbox') { // Ergebnisstring um Status der Checkbox und // den im Element gespeicherten Value erweitern ergebnisstring += 'nutzungsart[' + i + ']: Checked=' + document.formular.nutzungsart[i].checked + '; Value=' + document.formular.nutzungsart[i].value + '\n'; } // Ist die Zeichenkette zur Speicherung des Ergebnisses leer? if (ergebnisstring.length == 0) // Ausgabe eines Hinweises, für den Fall dass keine Checkboxen // in der Form waren alert ('Keine Checkboxelemente im Formular enthalten!'); else // Ausgabe der zusammengestellten Liste mit den Checkbox-Stati alert (ergebnisstring); } // --> </script> </form>
Im zweiten Beispiel zur Checkbox werden die Elemente über das Elements-Objekt des Form-Objekts adressiert. Die hier implementierte Funktion checkbox_values() sammelt die Value-Werte der aktivierten Checkbox-Elemente in einem Array und gibt dieses als Rückgabewert zurück. Ob ein Checkbox-Element in der Gruppe aktiviert ist, wird in einer If-Anweisung abgefragt, indem die Checked-Eigenschaft abgefragt wird – darüber hinaus wird im unteren Beispiel über die Type-Eigenschaft geprüft, ob es sich beim angesprochenen HTML-Element auch wirklich um eine Checkbox handelt.
Per Button – genauer gesagt über das onClick-Event des Buttons, welches der Benutzer durch Anklicken des Buttons auslöst – wird diese Funktion gestartet (zu Events siehe auch Event). Der von der Funktion gelieferte Rückgabewert wird über eine Alert-Box, einer der durch Window definierten Dialogboxen, ausgegeben.
<form name="formular2"> Lieblingstier:<br> <input type="checkbox" name="tier" value="hund"> Hund<br> <input type="checkbox" name="tier" value="katze"> Katze<br> <input type="checkbox" name="tier" value="maus"> Maus<br> <input type="button" onclick="alert ('Auswahl: ' + checkbox_values ())" value="Werteliste ausgeben"> <script language="javascript" type="text/javascript"> <!-- // JavaScript-Bereich für ältere Browser auskommentieren // Folgende Funktion liest die Werte (Eigenschaft values) der aktivierten // Checkbox-Elemente des Formulars aus und gibt diese in Form eines Arrays // zurück. function checkbox_values () { // Array zur Speicherung der Values der aktivierten Checkbox-Elemente var varray = new Array (); // Zähler, der die aktuelle Position im Ergebnis-Array speichert var valcount = 0; // Alle Elemente des Formulars durchlaufen for (var i = 0; i < document.formular2.elements.length; i++) // Handelt es sich beim zu bearbeitenden INPUT-Element um ein // Element vom Typ checkbox und ist diese Aktiviert (checked)? if (document.formular2.elements[i].type == 'checkbox' && document.formular2.elements[i].checked) // Value-Eigenschaft der Checkbox in das Ergebnis-Array // einfügen. varray[valcount++] = document.formular2.elements[i].value; // Ermittelte Values als Return-Wert zurückgeben return varray; } // --> </script> </form>
Beachten Sie bitte, dass Sie den JavaScript Source Code auch an Stellen ausserhalb des Form-Tags notieren können. Werden, wie in diesen Beispielen, Funktionen verwendet, so ist eine Ausgliederung des Codes in eine JS-Datei eine mögliche Option.
¬ Menu
¬ Gratis Download
¬ Seminare
¬ Yoga
¬ Insolvenzrecht
¬ News
15.08.2008Schleifen in PHP: Die While-Schleife » mehr 13.08.2008Nutzung von Variablen unter PHP: Definition, Sichtbarkeit und vordefinierte Variablen » mehr 11.08.2008Ausgabe von Datum und Zeit mit PHP nach Konvertierung in ein String » mehr Eine vollständige News-Liste ist auf der News-Seite zugänglich.
¬ Foren
¬ Buchtipp
JavaScript, m. CD-ROM - Einstieg für Anspruchsvolle
Weitere JavaScript Literaturtipps finden Sie unter JavaScript Bücher
Webdesign •
Beratung Internetseite •
Programmierung Internetseite