Blog - webdesign, javascript, jquery, html, css, php

Javascript: Checkboxen auswählen

Manchmal ist es von Nöten alle Check boxen aus einem Formular auszuwählen, genau für diesen Zweck ist dieses Script gedacht. Die Theorie:
Man lässt anhand einer Schleife jedem Element mit dem Namen X ein bestimmtes Attribut hinzufügen bzw. entfernen.
In der Praxis sieht der HTML Teil der ganzen Geschichte so aus:


<input type="checkbox" value="nummer1" name="checkbox[]" />
<input type="checkbox" value="nummer2" name="checkbox[]" />
<input type="checkbox" value="nummer3" name="checkbox[]" />
<input type="checkbox" value="nummer4" name="checkbox[]" />


Das Einzige was einer Erklärung bedarf ist der Name. Die eckigen Klammern dienen lediglich dazu die Werte der Check boxen für PHP in einem Array zusammen zu fassen. Wir würden somit ein Array mit dem Namen "checkbox" erhalten. Aber nun zurück zu unserem Javascript:


function check(boxes,art)
{
boxes = document.getElementsByName(boxes);
for (i = 0; i < boxes.length; i++) <br />
{
if (art == 'check' )
{
boxes[i].checked = 'checked';
}
if (art == 'uncheck' )
{
boxes[i].checked = '';
}
}
}


Anhand der übergebenen Variable "boxes" wird allen Elementen mit dem entsprechenden Namen das Attribut "checked" zugewiesen. Je nach "art" erhält das Attribut entweder den Inhalt "checked", für das auswählen oder bleibt leer und somit auch nicht ausgewählt.. Um das ganze zu "starten" brauchen wir nur noch die passenden "onclick" Anweisungen:


<a onclick="check('delete[]','check')" href="javascript:;">Alles auswählen</a>
<a onclick="check('delete[]','uncheck')" href="javascript:;">Auswahl aufheben</a>

  • Veröffentlicht:
  • 14.05.2008
  • Author:
  • Mathias Schübel
  • Permalink:
  • http://www.schuebel-webdesign.de/blog/13
zurück zum Blog