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. October 2012 -- Tween Beispiele (0)

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

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

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

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

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

Comments (7)
1359 mal gelesen.

7 Kommentare

Leave a comment »

Seiten:

1. Comment von: mr. a
12. May 2009: 15:33

besser gehts garnicht! vielen dank!

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

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

3. Comment 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. Comment 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. Comment von: letti
13. May 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. Comment von: foobar
25. June 2012: 8:52

funktioniert nicht wenn box.length = 1 ist

7. Comment von: Struppi
25. June 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.

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful