00 Stimmen

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

Tutorial von Stefan Trost | 05.12.2012 um 16:56

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.

AntwortenPositivNegativDatumStimmen
11 Stimme

Hallo,

ich hab ja leider von jQuery und JS generell keinen blassen Schimmer. 

Nur diese Funktion muss ich leider einbinden in ein Wordpress Template.

Kannst du mir bitte sagen, wie ich den "jquery code" einbinden muss?

Habs mal zwischen den Tags <script> und </script> drin, aber das reicht offensichtlich noch nicht :D

Wäre um jede Hilfe dankbar!
10.06.2013 um 17:03

AntwortenPositiv Negativ
22 Stimmen

Zunächst muss jQuery selber in deine Seite eingebunden werden. Das machst du zum Beispiel so:

<script type="text/javascript" src="<DEINE HOMEPAGE>jquery-1.6.4.min.js"></script>

Du kannst hier auch die Google APIs benutzen oder von der jQuery Seite die aktuellste Version verlinken.

Der Code von oben wird so eingebunden:

<script type="text/javascript">
  $(document).ready(function(){
    // CODE
  });
</script>

$(document).ready wird ausgeführt, wenn die Seite geladen ist. Das ist der Zeitpunkt, zu dem die Ereignisse den Elementen zugewiesen werden müssen.

Funktioniert es?
11.06.2013 um 02:13

Positiv Negativ
Antworten
Antworten

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.