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:

box 1
box 2
box 3
box 4
box 5

Alle

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;
}

ähnliche Artikel

  • 27. Oktober 2012 -- Tween Beispiele (0)

    Das Tween Objekt Ich vertiefe hier noch einmal die...

  • 22. Juni 2012 -- Tween(2) (0)

    Die Technik um mit Javascript eine Bewegung zu animieren...

  • 15. Juni 2012 -- Wordpress und Javascript (2)

    In der letzten Zeit durfte ich mich etwas intensiver...

Comments (7)
1850 mal gelesen.

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

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

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

Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful