jQuery: DIV-Container abhängig von Checkbox anzeigen oder ausblenden

In diesem Tutorial zeige ich euch, wie ihr mit HTML, CSS und ein wenig JavaScript- beziehungsweise jQuery-Code realisieren könnt, dass abhängig vom Zustand einer Checkbox ein DIV-Container entweder angezeigt oder ausgeblendet wird.

Schauen wir uns zuerst unser HTML für das kleine Beispiel an, an dem ich die Methode demonstrieren möchte:

HTML

Wir haben eine Checkbox und unter der Checkbox befindet sich ein DIV-Container. Dieser DIV-Container ist zunächst unsichtbar (display: none), soll aber - sobald wir die Checkbox aktivieren - angezeigt und eingeblendet werden (und wieder ausgeblendet werden, falls wir die Checkbox wieder deaktivieren).

<label><input type="checkbox" id="cb_show"> Zeige DIV</label>

<div id="div_show" style="display: none">
   Dieser Inhalt soll angezeigt werden.
</div>

Um unsere Checkbox und den DIV-Container mit JavaScript und jQuery ansprechen zu können, haben wir ihnen die IDs "cb_show" und "div_show" zugewiesen.

Diese Namen lassen sich natürlich beliebig nach eigenem Geschmack und Gebrauch anpassen. Wir benötigen ebenfalls unterschiedliche Namen für jedes Element, falls wir mehrere DIV-Container und Checkboxen haben, die unabhängig voneinander auf der gleichen Seite genutzt werden sollen (dazu später mehr).

JavaScript/jQuery

Nun brauchen wir nur noch den jQuery-Code, der uns die Sichtbarkeit des DIVs abhängig von dem Zustand der Checkbox ändern soll:

if ($('#cb_show').is(:checked)) {
   $('#div_show').show();
} else {
   $('#div_show').hide();
}

In der ersten Zeile fragen wir ab, ob unsere Chechbox "cb_show" checked ist (einen Haken hat). Falls ja, wird "div_show" mit .show() angezeigt, falls nein wird "div_show" mit .hide() ausgeblendet.

Noch einfacher geht es mit folgender Funktion:

$('#cb_show').click(function(){
   $('#div_show').toggle(this.checked);
});

Die erste Möglichkeit bietet sich allerdings trotzdem an, falls wir noch andere Funktionen abhängig von dem Zustand der Checkbox ausführen möchten, die sich so einfach in den Code der einzelnen Bedingungen einfügen lassen.

Mehrere DIV-Container auf einer Seite

Das bisher in diesem Tutorial beschriebene Beispiel demonstriert das Anzeigen und Ausblenden eines einzelnen DIV-Containers. Wenn wir allerdings mehrere DIV-Container mit mehreren Checkboxen auf der selben Seite unabhängig voneinander steuern möchten, müssen wir einige Anpassungen vornehmen.

Zunächst brauchen unsere DIV-Container eindeutige IDs um einzeln angesprochen werden zu können. Weiterhin ist es ökonomischer nur eine Funktion zu schreiben, die für jedes DIV aufgerufen werden kann, anstatt für jedes DIV eine eigene Funktion zu haben. Aus diesem Grund haben wir im nächsten Beispiel allen Checkboxen zur Steuerung der Sichtbarkeit die Klasse "cb_show" gegeben (über die nun die Funktion zugewiesen werden soll) und das Attribut "data-div" eingeführt (in dem die ID-Nummer des zugehörigen Containers hinterlegt ist).

Es ergibt sich also folgendes angepasstes HTML:

<label><input type="checkbox" class="cb_show" data-div="1"> Zeige DIV 1</label>
<label><input type="checkbox" class="cb_show" data-div="2"> Zeige DIV 2</label>

<div id="div_show1" style="display: none">
  Inhalt des ersten Containers
</div>

<div id="div_show2" style="display: none">
  Inhalt des zweiten Containers
</div>

Eine Anpassung des jQuery-Codes für dieses HTML-Beispiel könnte folgendermaßen aussehen:

$('.cb_show').click(function(){
   var div = $(this).data("div");
   $('#div_show'+div).toggle(this.checked);
});

Statt das Click-Event der einen Checkbox aus dem ersten Beispiel über ihre ID (#cb_show) zuzuweisen, weisen wir das Event hier über die Klasse (.cb_show) allen Checkboxen mit der Klasse "cb_show" zu. Im Event-Code lesen wir das data-div-Attribut derjenigen Checkboxen aus, die geklickt wurde und nutzen den Wert dieses Attributs, um den passenden DIV-Container einzublenden oder auszublenden.