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.
Über den Autor
Software 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
jQuery: Überprüfen, ob ein DIV Container leer ist
Frage | 4 Antworten
jQuery: Elemente einblenden und ausblenden
Tutorial | 0 Kommentare
jQuery: Mehrere Elemente einblenden und ausblenden
Frage | 3 Antworten
jQuery: Submit-Button deaktivieren, wenn keine Checkbox ausgewählt ist
Tipp | 5 Kommentare
jQuery: Alle Checkboxen markieren (Select/Unselect All)
Tipp | 0 Kommentare
Altglas-Container für blaues Glas
Frage | 1 Antwort
jQuery: Absolute Position eines Elements von oben (top) bestimmen
Frage | 1 Antwort
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.
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
Zunächst muss jQuery selber in deine Seite eingebunden werden. Das machst du zum Beispiel so:
Du kannst hier auch die Google APIs benutzen oder von der jQuery Seite die aktuellste Version verlinken.
Der Code von oben wird so eingebunden:
$(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