[Buhmann]

In diesem Tutorial wird beschrieben, wie man eine Checkbox erstellt, die mehrere Checkboxen auf einmal markieren / demarkieren kann.
Logischerweise funktioniert so etwas nur mit Javascript, was bedeutet, dass User, die Javascript deaktiviert haben, die Checkbox auch nicht benutzen können.

Wichtig: In diesem Tutorial wird nur beschrieben, wie man das Javascript baut. Wie ihr eine Liste mit Checkboxen macht, sollte euch also schon bekannt sein.

Das Grundgerüst
Hier ist ein Beispiel für ein Formular mit mehreren Checkboxen und einer Steuer-Checkbox, die allerdings noch keine Funktion hat:

<form name="f" action="index.php" method="post">
<input name="feld[0]" type="checkbox" />
<input name="feld[1]" type="checkbox" />
<input name="feld[2]" type="checkbox" />
<input name="feld[3]" type="checkbox" />
<input name="feld[4]" type="checkbox" />
<input name="feld[5]" type="checkbox" />
<input name="feld[6]" type="checkbox" />
Alle Auswählen <input type="checkbox" />
</form>

Wie ihr dieses Grundgerüst aufbaut, ist euch vollkommen selbst überlassen, wichtig ist nur, dass die Benennung der Checkboxen nach dem Format "name[nummer]" oder "name[]" geschieht.
Das erleichtert auch das Auslesen der Checkboxen später in einer PHP-Datei.

Schritt 1: Struktur der Funktion
Wir benötigen als erstes die Funktion mark() (wie ihr die nennt ist euch natürlich überlassen). Aufgabe der Funktion ist es, alle Checkboxen mit einem bestimmten Namen entweder zu aktivieren oder deaktivieren, je nachdem ob eine andere Checkbox aktiviert ist oder nicht.
Als Parameter werden also benötigt: Der Name der Felder und die Information: Aktivieren oder Deaktivieren.
Nun kann man natürlich nicht alle Namen von allen Checkboxen, die gesetzt werden sollen übergeben. Viel einfacher ist es, wenn man einen Präfix übergibt, also einen Namen, mit dem alle Checkboxen anfangen.

function mark(check,praefix) { //Alle Elemente, die mit praefix beginnen werden auf check gesetzt.
}

Schritt 2: Erstellen einer Liste mit allen Checkboxen
Leider lassen sich die Checkboxen nicht mit der Funktion document.getElementsByName() auslesen, da ihre Namen ja unterschiedlich sind.
Stattdessen lesen wir einfach alle Elemente aus dem Formular aus, und überprüfen den Namen und den Typ.

function mark(check,praefix) { //Alle Elemente, die mit praefix beginnen werden auf check gesetzt.
   var fields = document.forms["f"].elements;
   for(i=0;i<fields.length;i++) {
      var field = fields&#91;i&#93;;
   }
}

Als erstes werden alle Elemente des Formulars "f" (den Namen des Formulars kann man natürlich auch noch als Parameter für die Funktion nehmen, wenn man will) in die Variable fields gespeichert, damit der Code nicht allzu lang wird.
In der for-Schleife werden dann alle Elemente nacheinander aufgerufen. Die Variable field gibt dann immer das aktuelle Feld an.
Nun muss geprüft werden, ob der Name des Elements das Präfix aufweist und das Element auch eine Checkbox ist.

function mark(check,praefix) { //Alle Elemente, die mit praefix beginnen werden auf check gesetzt.
   var fields = document.forms["f"].elements;
   for(i=0;i<fields.length;i++) {
      var field = fields&#91;i&#93;;
      if((field.name.substr(0,praefix.length) == praefix) && (field.type == 'checkbox')) {
         //Markieren
      }
   }
}

Schritt 3: Aktivieren / deaktivieren der einzelnen Felder und Aufruf der Funktion.
Das Markieren der Felder ist dank der Variable check schnell getan, weil diese ja schon den gewünschten Zustand enthält.

function mark(check,praefix) { //Alle Elemente, die mit praefix beginnen werden auf check gesetzt.
   var fields = document.forms["f"].elements;
   for(i=0;i<fields.length;i++) {
      var field = fields&#91;i&#93;;
      if((field.name.substr(0,praefix.length) == praefix) && (field.type == 'checkbox')) {
         field.checked = check;
      }
   }
}

Um die Funktion aufzurufen, wird die Checkbox, die nachher alles steuern soll, um das Attribut "onclick" erweitert:

<input type="checkbox" onclick="mark(this.checked,'feld')" />

(Wir erinnern uns: Der erste Parameter gibt den gewünschten Zustand aller Felder an, der Zweite den Namen selbiger.)

Zwischenstand
Nun ist der Grundbau schon fertig. Wenn die Checkbox geklickt wird, übernehmen alle anderen Checkboxen, die mit einem bestimmten Präfix anfangen, automatisch ihren Status.

Der Code könnte nun so aussehen:

<script language="javascript" type="text/javascript">
   function mark(check,praefix) { //Alle Elemente, die mit praefix beginnen werden auf check gesetzt.
        var fields = document.forms["f"].elements;
        for(i=0;i<fields.length;i++) {
                var field = fields[i];
                if((field.name.substr(0,praefix.length) == praefix) && (field.type == 'checkbox')) {
                        field.checked = check;
                }
        }
   }
</script>
<form name="f" action="index.php" method="post">
<input name="feld[0]" type="checkbox" />
<input name="feld[1]" type="checkbox" />
<input name="feld[2]" type="checkbox" />
<input name="feld[3]" type="checkbox" />
<input name="feld[4]" type="checkbox" />
<input name="feld[5]" type="checkbox" />
<input name="feld[6]" type="checkbox" />
Alle Auswählen <input type="checkbox" onclick="mark(this.checked,'feld')" />
</form>

Schritt 4: Struktur der zweiten Funktion
Wie ihr sicher schnell bemerkt habt, hat das Script noch einen entscheidenden Fehler: Sobald eine andere Checkbox als die Steuer-Checkbox geändert wird, stimmt der Status dieser nicht mehr unbedingt.
Das ist zwar kein großes Problem, aber es kann u.U. den User verwirren.

Die Aufgabe der zweiten Funktion ist es nun, zu überprüfen, ob der Status der Steuer-Checkbox noch stimmt und ihn entsprechend anpassen.
Als Parameter brauchen wir nun zum einen die ID der Steuer-Checkbox (um sie nachher anzusprechen) und wieder ein Präfix für die Checkboxen, deren Status geprüft werden muss.

function test(feld,praefix) { //Das Feld feld ist genau dann geckeckt, wenn ale Elemente, die mit praefix beginnen, gechekt sind.
}

Schritt 5: Aufbau der zweiten Funktion
Die Funktionsweise der Funktion ist wie folgt: Wenn mindestens eine Checkbox nicht ausgewählt ist, soll auch die Steuer-Checkbox nicht ausgewält sein.
Wir setzten also zu Beginn eine Variable auf true (= alle Checkboxen sind aktiviert), die dann später auf false gesetzt wird, wenn eine Checkbox nicht aktiviert ist.
Dazu benötigen wir wieder eine Schleife, die wir unverändert aus der ersten Funktion übernehmen können.

function test(feld,praefix) { //Das Feld feld ist genau dann geckeckt, wenn ale Elemente, die mit praefix beginnen, gechekt sind.
   var allchecked = true;
   var fields = document.forms["f"].elements;
   for(i=0;i<fields.length;i++) {
      var field = fields&#91;i&#93;;
      if((field.name.substr(0,praefix.length) == praefix) && (field.type == 'checkbox')) {
         //Status überprüfen
      }
   }
   //Status der Steuer-Checkbox gegebenfalls anpassen
}

Der Code zum Überprüfen des Status jedes Feldes ist denkbar einfach. Wenn es nicht gecheckt ist, wird die Variable allchecked auf false gesetzt, sonst wird keine Änderung vorgenommen.
Die Steuer-Checkbox wird dann ausgewählt, wenn allchecked = true ist, sonst wird sie nicht gecheckt.

function test(feld,praefix) { //Das Feld feld ist genau dann geckeckt, wenn ale Elemente, die mit praefix beginnen, gechekt sind.
   var allchecked = true;
   var fields = document.forms["f"].elements;
   for(i=0;i<fields.length;i++) {
      var field = fields&#91;i&#93;;
      if((field.name.substr(0,praefix.length) == praefix) && (field.type == 'checkbox')) {
         if(!field.checked) {
            allchecked = false;
         }
      }
   }
   document.getElementById(feld).checked = allchecked;
}

Schritt 6:Aufruf der Funktion
Für die Identifizierung muss als erstes der Steuer-Checkbox eine ID zugewiesenwerden:

<input type="checkbox" id="all" onclick="mark(this.checked,'feld')" />

Die Funktion muss logischerweise nur dann aufgerufen werden, wenn eine der vielen Checkboxen geändert wird, d.h. sie bekommen alle auch ein onclick-Attribut:

<input name="feld[0]" type="checkbox" onclick="test('all','feld')" />

(Dieses Attribut bekommen natürlich alle checkboxen außer der Steuer-Checkbox.)

Endstand
Der vollständige Code kann nun so aussehen:

<script language="javascript" type="text/javascript">
   function mark(check,praefix) { //Alle Elemente, die mit praefix beginnen werden auf check gesetzt.
        var fields = document.forms["f"].elements;
        for(i=0;i<fields.length;i++) {
                var field = fields[i];
                if((field.name.substr(0,praefix.length) == praefix) && (field.type == 'checkbox')) {
                        field.checked = check;
                }
        }
   }

   function test(feld,praefix) { //Das Feld feld ist genau dann geckeckt, wenn ale Elemente, die mit praefix beginnen, gechekt sind.
        var allchecked = true;
        var fields = document.forms["f"].elements;
        for(i=0;i<fields.length;i++) {
                var field = fields[i];
                if((field.name.substr(0,praefix.length) == praefix) && (field.type == 'checkbox')) {
                        if(!field.checked) {
                                allchecked = false;
                        }
                }
        }
        document.getElementById(feld).checked = allchecked;
   }
</script>
<form name="f" action="index.php" method="post">
<input name="feld[0]" type="checkbox" onclick="test('all','feld')" />
<input name="feld[1]" type="checkbox" onclick="test('all','feld')" />
<input name="feld[2]" type="checkbox" onclick="test('all','feld')" />
<input name="feld[3]" type="checkbox" onclick="test('all','feld')" />
<input name="feld[4]" type="checkbox" onclick="test('all','feld')" />
<input name="feld[5]" type="checkbox" onclick="test('all','feld')" />
<input name="feld[6]" type="checkbox" onclick="test('all','feld')" />
Alle Auswählen <input type="checkbox" id="all" onclick="mark(this.checked,'feld')" />
</form>

Ich hoffe, dass mein erstes Tutorial einigermaßen gelungen ist und alles verständlich war.