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

In diesem Tutorial zeige ich euch, wie ihr mit HTML, CSS und JavaScript/jQuery 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 Beispiel an:

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, wenn wir die Checkbox aktivieren angezeigt werden.

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

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

Um unser Checkbox und das DIV ansprechen zu können, haben wir ihnen die IDs "cbshow" und "divshow" zugewiesen.

JavaScript/jQuery

Nun brauchen wir nur noch den jQuery Code:

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

In der ersten Zeile fragen wir ab, ob unsere Chechbox "cbshow" checked ist. Falls ja, wird "divshow" angezeigt, falls nein ausgeblendet.

Noch einfacher geht es mit folgender Funktion:

$('#cbshow').click(function(){
   $('#divshow').toggle(this.checked);
});

Die erste Möglichkeit bietet sich allerdings an, falls wir noch andere Funktionen abhängig von dem Zustand der Checkbox ausführen möchten.