un Forastero <Webworking>
Anhaken, Enthaken und Haken umkehren bei Checkboxen
Donnerstag, 06 Mai 2010
Besuchern, Kunden und nicht zuletzt sich selbst Arbeit abzunehmen ist immer willkommen. Heute erleichtern wir das Anhaken (auch als Auswählen oder Markieren bezeichnet) von Checkboxen.
Unser Formular sieht in Etwa so aus:
<form name="vioform">
<input type="checkbox" name="cbox" value="1"> 1
<input type="checkbox" name="cbox" value="2"> 2
<input type="checkbox" name="cbox" value="3"> 3
<input type="checkbox" name="cbox" value="4"> 4
<input type="checkbox" name="cbox" value="5"> 5
</form>
Das Formular mit Checkbox ist da, nun fehlt das Javascript, welches das Anhaken für uns übernimmt. Wir schreiben den Code in eine Funktion, damit die Prozedur später per Link angestossen werden kann. Beginnen tut alles mit einer Schleife, alle Elemente des Formulars, des Form-Elements mit dem Namen vioform, werden durchlaufen. Die if-Anweisung fragt nach, ob das aktuelle Element vom Typ "checkbox" ist. Trifft das zu, wird dem Attribut des Elements checked der Wert true zugeteilt, mit anderen Worten, ist das Element eine Checkbox, wird es angehakt.
<script type="text/javascript">
// Alle Anhaken
function AlleAnHaken(){
for(var i=0;i < document.vioform.length; ++i){
if(document.forms[0].elements[i].type == "checkbox"){
document.forms[0].elements[i].checked = true;
}
}
}
</script>
Als Steuerungselement wählen wir einen Link, der im href die Javascriptfunktion aufruft.
<a href="javascript:AlleAnHaken()">Alle Checkboxen anhaken</a>
Um den Spaß perfekt zu machen, brauchen wir nun noch weitere 2 Funktionen, eine Funktion, um alle Haken wieder zu entfernen und eine Funktion zum Umkehren der markierten Checkboxen. Das Entfernen der Haken ist das genaue Gegenteil der Anhaken Funktion, es wird den checked-Attributen aller Checkboxen der Wert false zugeteilt. Das Umkehren der Haken ist ein kleines bischen komplizierter, hier muss erst ermittelt werden, was gerade angehakt ist und was nicht.
<script type="text/javascript">
// // Alle Haken entfernen
function nixAnHaken(){
for(var i=0;i < document.vioform.length; ++i){
if(document.forms[0].elements[i].type == "checkbox"){
document.forms[0].elements[i].checked = false;
}
}
}
</script>
<script type="text/javascript">
// Haken umkehren
function HakenUmkehren(){
for(var i=0;i < document.vioform.length; ++i){
if(document.forms[0].elements[i].type == "checkbox"){
if(document.forms[0].elements[i].checked == true)
{document.forms[0].elements[i].checked = false;}
else
{document.forms[0].elements[i].checked = true;}
}
}
}
</script>
Nun erweitern wir die Steuerelemente um 2 Links, so können alle 3 Funktionen auf das Formular angewandt werden.
<a href="javascript:AlleAnHaken()"> alle Checkboxen anhaken</a>
<a href="javascript:nixAnHaken()"> keine Checkboxen anhaken</a>
<a href="javascript:HakenUmkehren()"> Markierung umkehren</a>
Testen wir das Ganze mal in der Praxis. Hier ist ein Beispiel-Formular
alle Checkboxen anhaken
keine Checkboxen anhaken
Markierung umkehren