Checkboxen (de-)aktivieren mit jQuery

Aus Usability-Gründen ist es häufig hilfreich, dem Benutzer die Möglichkeit anzubieten, alle Checkboxen einer Gruppe gleichzeitig zu aktivieren bzw. die Aktivierung zurückzunehmen. Mit jQuery kann man hier eine einfache Funktion einsetzen, doch Achtung: Je nach Version sind die Checkboxen anders anzusprechen.

Prinzipiell unterscheidet sich die Funktionsweise in der Verwendung  der Eigenschaften .attr und .prop. Das HTML-Grundgerüst bleibt dabei gleich:

<p>
<a href="#" class="marker">alle markieren</a> | <a href="#" class="demarker">alle Markierungen entfernen</a>
</p>
[...]
<input type="checkbox" name="dieListe[]" value="1" />
<input type="checkbox" name="dieListe[]" value="2" />
<input type="checkbox" name="dieListe[]" value="3" />
[...]

Für ältere jQuery-Versionen kann man folgendes Skript ergänzen:

<script>
$(function() {
     $('a.marker').click(function() {
          var checkboxen = $("input[name=dieListe\\[\\]]");
          checkboxen.attr("checked", cblist.attr("checked"));
     });
    $('a.demarker').click(function() {
         var checkboxen = $("input[name=dieListe\\[\\]]");
         checkboxen.attr("checked", !cblist.attr("checked"));
     });
});
</script>

Mit der aktuellen jQuery 1.9.1-Version gelingt nun das Vorhaben jedoch nur zum Teil. Zwar ist einmaliges abwählen möglich, danach aber noch einmal alle Checkboxen zu aktivieren ist nicht möglich. Daher sollte hier folgende Variante genutzt werden:

$(function() {
      $('a.marker').click(function() {
           var checkboxen= $("input[name=dieListe\\[\\]]");
           checkboxen.prop('checked', true);
      });
     $('a.demarker').click(function() {
          var checkboxen= $("input[name=dieListe\\[\\]]");
          checkboxen.prop('checked', false);
     });
});
Schwerpunkt: , ,

3 Antworten auf “Checkboxen (de-)aktivieren mit jQuery”

    1. Ganz herzlichen Dank für den Hinweis, der natürlich vollkommen richtig ist. Leider sind im ursprünglichen Beispiel die Bezeichner durcheinandergewirbelt. Ist nun angepasst – nochmals besten Dank!

  1. In den a-Tags muss aber auch noch die Klasse marker bzw. demarker gesetzt werden? Sonst weiß JQuery ja nicht, wo die Klick-Funktion hin soll.

    Nichtsdestotrotz hat mir das Beispiel aber auch so schon geholfen, die richtige Schreibweise zu finden. Vielen Dank.

Schreibe einen Kommentar

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