Für das Auswählen aller Checkboxen, sobald eine bestimmte Checkbox geklickt wurde, habe ich für euch hier einmal ein kleines JQuery-Snippet. Ein häufiger Anwendungsfall einer solchen Funktion ist z.B. eine Tabelle in der ich bestimmte oder eben alle Tabellenzeilen per Checkbox auswählen lassen möchte. Klicke ich auf die Checkbox, die symbolisch für „Alle Tabellenzeilen markieren“ steht, werden alle Tabellenzeilen mit dem untenstehenden JQuery-Code markiert.

Demo/Beispiel

HTML-Code – Ausgangssituation


      [...]
    
      [...]
    
       [...] 
    
      [...]
    

JQuery-Snippet

    $("input[name='check_all']").click(function(){
      if($(this).val()==0){
        $(this).parents("table")
               .find("input:checkbox")
               .attr("checked","checked")
               .val("1");
      }
      else{
        $(this).parents("table")
               .find("input:checkbox")
               .attr("checked","")
               .val("0");
      }
    });

Erklärung

In Zeile 1 wird das Input-Feld mit dem, welches symbolisch für das Markieren aller Checkboxen steht, mit dem Click-Event verbunden. In der Zeile 2 folgt eine IF-Bedingung um zu schauen, welcher Status, also ob alle Checkboxen zur Zeit gesetzt sind oder nicht, vorliegt. Dies wird über das Value-Attribut des Input-Feld gesteuert. Defaultmäßig steht der Value auf „0“.

In den Zeilen 3 – 6 erfolgt das eigentlich Setzen der Checkboxen. Es wird vom geklickten Element aus geschaut, wo sich das nächste <table>-(Eltern-)Element befindet. Innerhalb dieser Tabelle werden dann alle Checkboxen markiert. In diesem Beispiel ist es abhängig von der Tabelle, es kann aber auch problemlos auf ein <form>-Tag mit einer ID angewendet werden. Dazu müsste lediglich parents(„table“) durch parents(„form#id“) im IF-Block (Zeile 3) sowie im ELSE-Block (Zeile 9) getauscht werden.

In den Zeilen 8 – 13 folgt der ELSE-Zweig, in dem, bei bereits gesetzten Checkboxen, alle Checkboxen deaktiviert werden. Hier werden ebenfalls nur alle Checkboxen berücksichtigt, die sich innerhalb einer Tabelle befinden.

Hoffe ihr habt schon eine nette Verwendung für dieses kleine JQuery-Snippet gefunden 🙂