Codeschnipsel: Mehrere Checkboxen mit einer de/aktivieren

von Benutzer gelöscht | 0 | 6842 Aufrufe

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.

Über den Autor: Benutzer gelöscht
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten