Alle Checkboxen markieren (und für die Löschung vorbereiten)

Posted in PHP by tobi on the Oktober 5th, 2006

Immer wieder sieht man diese Funktion, ob bei Ebay oder phpMyAdmin und nie hat man sie beachtet. Nur benutzt hat man sie schon oft: Ich rede von der Funktion alle ausgebenen Datensätze mit einem Klick zu selektieren und zu löschen (jaja, sind 2 Klicks;-) ). Graben im Quellcode von Ebay brachte nicht viel und habe ich es aufgegeben und mich dazu überwunden diese Funktion selbst zu schreiben. Nach einigen Recherchen und Auffrischungen in Sachen DOM ist mir dies nun auch erfolgreich gelungen.

Gehen wir davon aus, wir geben tabellarische Daten aus einer Datenbank aus und wollen diese nun mit einem Mausklick anwählen und löschen:

PLAIN TEXT
HTML:
  1. <form method="post" name="form1" id="form1"> <label>
  2. <input type="checkbox" value="1" name="checkbox[]" />
  3. ich</label>
  5. <input type="checkbox" value="2" name="checkbox[]" />
  6. du</label>
  8. <input type="checkbox" value="3" name="checkbox[]" />
  9. er</label>
  11. <input type="checkbox" value="4" name="checkbox[]" />
  12. sie</label>
  14. <input type="checkbox" value="5" name="checkbox[]" />
  15. es</label>
  16. <input type="button" value="alles markieren" name="mark_all" />
  17. onclick="this.value = check_all_boxes(this.form.name,'alles markieren','alles löschen')" />
  18. </form>

Unten habe ich schon mal die Buttons zum Markieren und Löschen eingebaut.
Den onclick ignorieren wir vorerst einmal, denn den benötigt erst folgendes Javascript:

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript" language="javascript">
  2. <!--
  3.  
  4. checkflak = false;
  5. function check_all_boxes(obj,msg1,msg2){
  6.  
  7. var o = document.forms[obj].elements;
  8.  
  9. if(!checkflak){
  10. for (i=0; i<o.length; i++){
  11. if (o[i].type == 'checkbox'){
  12. o[i].checked = true;
  13. }
  14. }
  15. checkflak = true;
  16. return msg2;
  17. }
  18.  
  19. if(checkflak){
  20. for (i=0; i<o.length; i++){
  21. if (o[i].type == 'checkbox'){
  22. o[i].checked = false;
  23. }
  24. }
  25. checkflak = false;
  26. return msg1;
  27. }
  28. }
  29.  
  30. -->
  31. </script>

Diese Funktion erwartet den Namen des Formulars und zwei Statusmeldungen: "Alle markieren" und "alle löschen". Ich habe diese Variante gewählt um später bei eventueller Mehrsprachigkeit oder bei der Ausgabe in einer Template-Engine die Werte leichter ersetzen zu können und im Script selbst keine definierte Sprachausgabe zu haben.

Nun können wir leicht alle Elemente des Formulars per DOM auswählen. Das Flak außerhalb der Funktion (checkflak) wird benötigt um später die Beschriftung des Buttons zu verändern. Denn wenn diese Variable true ist, gibt die Funktion msg1 zurück(und alle Felder sind angehäkelt), ist sie false bekommen wir msg2 von der Funktion zurückgegeben. Das mache ich mit einem Trick: Ich übergebe dem Button den Rückgabewert der Funktion mit this.value= .

Eine wichtige Sache für den späteren Umgang mit PHP: Man sieht, dass alle Checkboxen ein "[]" nachgestellt ist. Dieses "[]"dient dazu die Checkboxen später als $_POST-Array leicht kontrollierbar zu machen. So ist die erste Checkbox $_POST['checkbox'][0] usw.

kommentieren