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: , ,

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.