Codeschnipsel: Mehrere Checkboxen mit einer de/aktivieren

Anzeige Hier werben

Beschreibung

Jeder kennt diese Methode zum z.B. Löschen von PMs oder E-Mails in einem Webinterface.
Es steht eine Checkbox zur Verfügung die durch aktivieren bzw. deaktivieren alle unter sich befindlichen Checkboxen ebenfalls aktiviert bzw. deaktiviert.

Der Code

Das JavaScript sucht alle <input> mit dem Namen checkall, dann das Elternelement <fieldset> in dem das <input> ist und markiert alle <input> Checkboxen darunter bei Klick.

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script type="text/javascript">
    function detectCheckAllCheckboxes()
    {
        inputs = document.getElementsByTagName('input'); // alle Input-Felder des Dokumentes
        for(i = 0;i < inputs.length;i++) // Jedes einzelne Feld durchgehen
        {
            input = inputs[i]; // aktuelles Feld in eine Variable speichern zur einfacheren Schreibweise
            if(input.getAttribute('type', false).toUpperCase() == 'CHECKBOX' && input.getAttribute('name', false).toUpperCase() == 'CHECKALL') // Ist aktuelles Feld eine Checkbox und trägt diese den Namen checkall
            {
                input.onclick = function() // Beim Klick auf die Checkbox
                    // Info: onchange kann der IE nicht auf eine Checkbox
                {
                    checkboxes = false;
                    if(this.parentNode.tagName.toUpperCase() == 'LEGEND') // Ist das Elternelement die Legende eines Fieldsets
                        checkboxes = this.parentNode.parentNode.getElementsByTagName('input'); // Alle Input Felder dieses Fieldsets
                    else if(this.parentNode.tagName.toUpperCase() == 'FIELDSET') // Ist das Elternelement ein Fieldset
                        checkboxes = this.parentNode.getElementsByTagName('input'); // Alle Input Felder dieses Fieldsets                   
                    if(typeof checkboxes == 'object') // Wenn checkboxes ein Objekt ist
                    {
                        for(i = 0;i < checkboxes.length;i++) // Jedes einzelne Feld durchgehen
                        {
                            checkbox = checkboxes[i]; // aktuelles Feld in eine Variable speichern zur einfacheren Schreibweise
                            if(checkbox.getAttribute('type', false).toUpperCase() == 'CHECKBOX' && input.getAttribute('name', false).toUpperCase() != 'CHECKALL') // Ist das aktuelle Feld eine Checkbox und trägt nicht den Namen checkall
                            {
                                if(this.checked) // Ist die checkall Checkbox aktiviert
                                    checkbox.checked = true; // aktiviere Aktuelle Checkbox
                                else // Ist die checkall Checkbox nicht aktiviert
                                    checkbox.checked = false; // deaktiviere Aktuelle Checkbox
                            }
                        }
                    }
                }
            }
        }
    }
    
    window.onload = function()
    {
        detectCheckAllCheckboxes(); // Funktion bei Dokumentaufruf aufrufen
    }
    
</script>

<fieldset>
    <legend><input type="checkbox" name="checkall" /> Berechtigungen</legend>
    <input type="checkbox" name="foo[]" /> darf lesen<br />
    <input type="checkbox" name="foo[]" /> darf ändern<br />
    <input type="checkbox" name="foo[]" /> darf löschen<br />
    <input type="checkbox" name="foo[]" /> darf hochladen<br />
    <input type="checkbox" name="foo[]" /> darf verschieben
</fieldset>

Die Zuordnung bzw. die Hierarchie kann natürlich verändert werden.
Ich habe diese nur deshalb so gewählt, da ich so meine Formulare aufbaue.

hat Erfahrungen im Webentwicklungs-Bereich seit mehr als 13 Jahren. Arbeitet als System Engineer bei einem Verlag in Stuttgart.
Profilseite betrachten

Kommentare: Codeschnipsel: Mehrere Checkboxen mit einer de/aktivieren

Neuen Kommentar schreiben
hmm
Beantworten

Jetz müsste die Gesamt-checkbox noch ausgegraut werden, wenn weder alle noch keine checkbox markiert ist. (sonst lügt die gesamt-checkbox ja)

Simon Bethke am 04.11.2007 um 22:01
Re: hmm
Beantworten

Jetz müsste die Gesamt-checkbox noch ausgegraut werden, wenn weder alle noch keine checkbox markiert ist. (sonst lügt die gesamt-checkbox ja)

Naja, ich sags mal so, man ist ja selbst schuld wenn man dann wieder eine deaktiviert bzw. aktiviert

Fabian "q-rios" Krause-Willenberg am 04.11.2007 um 22:01
Re: hmm
Beantworten

Jetz müsste die Gesamt-checkbox noch ausgegraut werden, wenn weder alle noch keine checkbox markiert ist. (sonst lügt die gesamt-checkbox ja)

Naja, ich sags mal so, man ist ja selbst schuld wenn man dann wieder eine deaktiviert bzw. aktiviert

naja man kann es sich dadurch ja leichter machen wenn man alle ausser einen anhacken will, nimmt man erst die hauptbox und macht dann die andere weg, mit dem ausgrauen ist ne gute idee

Tim Spiekerkötter am 04.11.2007 um 22:01
Re: hmm
Beantworten

Ich fänd ausgrauen auch ganz sinnvoll. Dann kann man gleich sehen, ob man jetzt auch wirklich alles ausgewählt hat.

Firebird am 04.11.2007 um 22:01
Logik?
Beantworten

Wie verhält sich die Hauptbox denn (mit nem logischen Operator) zu den restlichen Boxen?

Simon Bethke am 04.11.2007 um 22:01
Re: Logik?
Beantworten

Wie verhält sich die Hauptbox denn (mit nem logischen Operator) zu den restlichen Boxen?

Auf was willst du hinaus?

Fabian "q-rios" Krause-Willenberg am 04.11.2007 um 22:01
Re: Logik?
Beantworten

darauf, das es zustände gibt, bei denen die select-all box lügt...
vielleicht sind ja alle boxen (incl. die all-box ganz oben) deselektiert bis auf den letzten... der sich auf der nächsten seite befindet.
eigentlich hatte ich ja auch auf die deselekt all box geklickt, aber irgendwie hat das nicht geklappt. also ist die box unten die ich nicht sehe immernoch selektiert.
...brabbel brabbel ...
ok? :P

Simon Bethke am 04.11.2007 um 22:01
Re: Logik?
Beantworten

darauf, das es zustände gibt, bei denen die select-all box lügt...
vielleicht sind ja alle boxen (incl. die all-box ganz oben) deselektiert bis auf den letzten... der sich auf der nächsten seite befindet.
eigentlich hatte ich ja auch auf die deselekt all box geklickt, aber irgendwie hat das nicht geklappt. also ist die box unten die ich nicht sehe immernoch selektiert.
...brabbel brabbel ...
ok? :P

Ka, kann den Fehler net reproduzieren.
Vor allem ist die Erklärung mit der nächsten Seite ein bisschen strange.

Fabian "q-rios" Krause-Willenberg am 04.11.2007 um 22:01
Re: Logik?
Beantworten

Is doch voll einfach:
Wenn checkbox "alle" = ON dann alle = ON
Wenn checkbox "alle" = OFF dann alle = OFF

wenn ich hinterher noch eine einzelne andere box ändere dann lügt die checkbox "alle".

Simon Bethke am 04.11.2007 um 22:01
Re: Logik?
Beantworten

Is doch voll einfach:
Wenn checkbox "alle" = ON dann alle = ON
Wenn checkbox "alle" = OFF dann alle = OFF

wenn ich hinterher noch eine einzelne andere box ändere dann lügt die checkbox "alle".

Dann ist das doch genau das selbe Thema wie der der Kommentar darunter?
Wozu jetzt noch einen zweiten zum gleichen Thema?

Fabian "q-rios" Krause-Willenberg am 04.11.2007 um 22:01
Re: Logik?
Beantworten

da kann ich genau so fragen, wieso du immer alles zitierst...

Simon Bethke am 04.11.2007 um 22:01
Re: Logik?
Beantworten

da kann ich genau so fragen, wieso du immer alles zitierst...

Weil es automatisch gemacht wird.
Zu dem hat das Thema nichts damit zu tun, dass der oberste Kommentar eigtl. total sinnlos war.
Es ist unten ja schon von dir selber geschrieben worden, dass man das ändern sollte.

Fabian "q-rios" Krause-Willenberg am 04.11.2007 um 22:01
Re: Logik?
Beantworten

Was passiert eigentlich wenn zuviel kommentiert wird? (schließlich ist das ja ne beta)...
zumindest dieses Kommentarfenster wird immer schmaler...
passt da nachher nurnoch ein wort pro zeile rein?

Simon Bethke am 04.11.2007 um 22:01
Re: Logik?
Beantworten

passt da nachher nurnoch ein wort pro zeile rein?

Ja, selbst schuld :P

Edit: Jetzt ist aber Schluss hier...

David Danier am 04.11.2007 um 22:01