0 0 Stimmen

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

Tutorial von Stefan Trost | 05.12.2012 um 16:56 Uhr

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 Uhr

AntwortenPositiv Negativ

Stefan Trost

Profil anzeigen | Nachricht
Avatar
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 Uhr

Positiv Negativ
Antworten

Über den Autor

Avatar AutorSoftware 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 | Nachricht

 

Ähnliche Themen

Wichtiger Hinweis

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.