Checkboxen auf einmal markieren [Javascript ist Toll!]

24. August 2005 - 12:24

Checkboxen auf einmal markieren

Es sollen mit Hilfe einer Checkbox, alle Checkboxen einer bestimmten Gruppe auf einmal markiert werden.

Das Formular

Das Formular dazu sieht so aus:

Ich verwende für die Checkboxen Namen, die in PHP üblich sind um Elemente als Array abzufragen.

Der HTML Quellcode:

<form action="#">
<p><input type="checkbox" name="loeschen[]"> box 1<br>
<input type="checkbox" name="loeschen[]"> box 2<br>
<input type="checkbox" name="loeschen[]"> box 3<br>
<input type="checkbox" name="loeschen[]"> box 4<br>
<input type="checkbox" name="loeschen[]"> box 5<br>
<p>
<input onclick="check_all('loeschen[]', this)" type="checkbox"> Alle
</form>

JS Quellcode

Der Quellcode ist relativ simpel:

function check_all(name, el){
     if(!el || !el.form) return alert('falscher Parameter');
     var box = el.form.elements[name];
     if(!box) return alert(name + ' existiert nicht!');
     if(!box.length) box.checked = el.checked; else 
     for(var i = 0; i < box.length; i++)  box[i].checked = el.checked;
}

7 Kommentare

Leave a comment »

Seiten:

1. Kommentar von: mr. a
12. Mai 2009: 15:33

besser gehts garnicht! vielen dank!

2. Kommentar von: JochenSan
12. April 2010: 19:00

Deine Seite war mir eine große Hilfe! Dafür vielen Dank!

3. Kommentar von: zap
22. April 2010: 15:04

jquery ftw:
$(‚input[name=loeschen[]]‘).attr( ‚checked‘,’checked‘ );

einfacher (schneller) geht der zugriff über class oder id, aber der attribut-selektor funzt genauso.

ähnliche thematik für das auslesen von radiobuttons:

$(‚input[name=test]:checked‘).val();
mit „herkömmlichem“ JS müsste man erst die elemente raussuchen und dann mit einer schleife bis zum gecheckten drüber laufen…

4. Kommentar von: Struppi
22. April 2010: 16:20

Schon klar das der Code mit jquery kürzer aussieht.
Aber jquery wird im Endeffekt nichts anderes machen als: „erst elemente raussuchen und dann mit einer schleife bis zum gecheckten drüber laufen…“

5. Kommentar von: letti
13. Mai 2011: 22:47

Hallo Struppi,

Funktioniert super!
Aber…was muss ich ergänzen, damit die Markierung der Checkbox „Alle“ automatisch wieder entfernt wird, wenn ich Selektierung von einer der 5 Checkboxen „box 1-5“ wieder rausnehme? Vielen Dank schonmal!

Grüße
Kien

6. Kommentar von: foobar
25. Juni 2012: 8:52

funktioniert nicht wenn box.length = 1 ist

7. Kommentar von: Struppi
25. Juni 2012: 10:23

Dann macht so was auch keinen Sinn.

Ich hab‘ aber die eine Zeile, die notwendig ist das zu ergänzen, trotzdem mal eingebaut. Danke, für den Hinweis.

Schreibe einen Kommentar Antworten abbrechen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Stop Spam Harvesters, Join Project Honey Pot

marketing-bankruptcy

Javascript ist Toll!