Entwicklung - Javascript/Ajax - Javascript: Mehrere Checkboxen mit einem Klick markieren (Teil 2)

Javascript/Ajax: Javascript: Mehrere Checkboxen mit einem Klick markieren (Teil 2)

manu (55)

manu

03.09.2002 23:07

Aachen

  • 876 Postings, noch 24 bis zum nächsten Level (900)

Postings: 876

Javascript: Mehrere Checkboxen mit einem Klick markieren (Teil 2)

Donnerstag, 04. Juni 2009 14:20

  • 0.0/6 Votes: 0
0.0/6 Votes: 0
In diesem Posting hier habe ich beschrieben, wie man mithilfe einer Master-Checkbox mehrere weitere Checkboxen markiert bzw. die Markierung aufhebt. Das Ganze funktioniert aber auch mit einem Button. Hierbei werden beim ersten Klick alle Checkboxen markiert, beim zweiten Klick wird die Markierung wieder aufgehoben.

Der HTML-Part könnte folgendermaßen aussehen:
HTML4STRICT: (Auswählen)<form method="post" action="#" id="checkboxTest">
<input type="checkbox" name="mod[]" id="mod_1" value="1" />
<input type="checkbox" name="mod[]" id="mod_2" value="2" />
<input type="checkbox" name="mod[]" id="mod_3" value="3" />

<input id="newsletter_checker" type="submit" name="submit" value="Alle markieren" onclick="selectCheckboxes('checkboxTest');return false" />
</form>

Die Javascript-Funktion selectCheckboxes sieht so aus (zum direkten Einbinden in HTML muss die Funktion zwischen <script type="text/javascript"><!-- und --></script> stehen; wer es XHTML valide mag, sollte das Javascript mit dem Character-Data-Block einfassen: <script type="text/javascript">// <![CDATA[ und // ]]></script>):
JAVASCRIPT: (Auswählen)var marker = true;
function selectCheckboxes(formname) {
    if (marker == false) {
        document.getElementById('newsletter_checker').value = 'Alle demarkieren';
        for (var i = 0;i < document.forms[formname].elements.length;i++) {
            if(document.forms[formname].elements[i].type == 'checkbox') {
                document.forms[formname].elements[i].checked = true;
                marker = true;
            }
        }
    } else {
        document.getElementById('newsletter_checker').value = 'Alle markieren';
        for (var i = 0;i < document.forms[formname].elements.length;i++) {
            if(document.forms[formname].elements[i].type == 'checkbox') {
                document.forms[formname].elements[i].checked = false;
                marker = false;
            }
        }
    }
}
Signatur:\\\"I have not failed. I\\\'ve just found 10,000 ways that won\\\'t work.\\\" - Thomas Alva Edison (1847-1931)
Bookmark setzen!:Zu Google Bookmark hinzufügen.Zu bloglines hinzufügen.Zu Newsgator hinzufügen.Zu FURL hinzufügen.Zu DIGG hinzufügen.Zu Webnews hinzufügen.Zu Netscape hinzufügen.Zu Yahoo MyWeb hinzufügen.Zu spurl.net hinzufügen.Zu diigo hinzufügen.Zu Newsvine hinzufügen.Zu del.icio.us hinzufügen.Zu SIMPIFY hinzufügen.Zu Mister Wong hinzufügen.Zu Linkarena hinzufügen.Zu isio.de hinzufügen.Zu Oneview hinzufügen.Zu yigg.de hinzufügen.Zu reddit hinzufügen.Zu StumbleUpon hinzufügen.Zu Slashdot hinzufügen.Zu Blinklist hinzufügen.Zu Technorati hinzufügen.Zu Blogmarks hinzufügen.Zu Blinkbits hinzufügen.Zu ma.gnolia hinzufügen.Zu smarking.com hinzufügen.Zu Netvouz hinzufügen.Zu co.mments hinzufügen.Zu Connotea hinzufügen.Zu de.lirio.us hinzufügen.

Specials

Bytefresser Specials: Anno 1404

Umfrage

Welches ist Dein Lieblings-Anno?

(168 Stimmen)

1. Ganz klar: Anno 1800!
2. Anno 2205
3. Anno 2070
4. Anno 1404
5. Anno 1701
6. Anno 1503
7. Anno 1602
8. Anno Online

Benutzer-Counter

Besucher gesamt: 1.654.646
Besucher heute: 198
Besucher gestern: 3.093
Max. Besucher/Tag: 4.044
Gerade online: 13
Max. online: 314
Seiten gesamt: 41.352.666
Aufrufe diese Seite: 5.456

Tag-Cloud

  xhtml     edison     donnerstag     funktion     markierung     postings     thomas     html4strict     entwicklung     master-checkbox     html-part     signatur     hierbei     cdata     level     auswählen     checkboxen     javascript     bytefresser     einbinden     button     ganze     bookmark     aachen