✔ Einblenden bestimmter Formfelder bei auswahl der Checkbox

Patejoker

Patejoker

Grünschnabel
Hallo ich habe ein Formular in dem ich bestimmte sache abfrage, nun ist bzw. soll es aber so sein das wenn ich eine bestimmte Checkbox auswähle , sich ein weiteres Feld sichtbar macht.

Irgendwie klappt da aber was nicht, eventuell hat ja einer eine Idee.
Ich bin jetzt nicht so der Programmier Experte

Der bereich im Formular sieht woe folgt aus:
HTML: 
<bereich>
      <h2>Material</h2>
        Benötigte Ausstatung sofern nicht vorhanden:
        <input id="c15" type="checkbox"><label for="c15">PC</label>
        <input id="c16" type="checkbox" class="hidebuttons"><label for="c16">Notebook</label>
        <input id="c17" type="checkbox"><label for="c17">1 Monitor</label>
        <input id="c18" type="checkbox"><label for="c18">2 Monitore</label>
        <input id="c19" type="checkbox"><label for="c19">Handy</label>
        <input id="c20" type="checkbox"><label for="c20">Tablet</label>
        <input id="c21" type="checkbox"><label for="c21">Festnetztelefon</label>
        <input id="c22" type="checkbox"><label for="c22">Chip Zeiterfassung</label>
        <input id="c23" type="checkbox"><label for="c23">Chip Zugangskontrolle</label>
        <input id="c24" type="checkbox" class="hidebuttons"><label for="c24">sonstiges</label>
        <input id="c25" type="checkbox"><label for="c25">UMTS-Karte(Nootbook)</label>
        <br>
          <div id="c16show" style="display:none">
            <input name="Begründung_Notebook" placeholder="Notebook Erklärung" type="text">
          </div>
          <div id="c24show" style="display:none">
            <input name="sontiges_Material" placeholder="Sonstiges" type="text">
          </div>
        <button class="next" type="button" style="font-size: 18px; border-radius: 4px;">Weiter</button>


</bereich>

Der passenden JavaCode (wo ich hoffe das er passt aber nicht so richtig wil lautet wie folgt:

Code: 
$('.hidebuttons').click(function(){
   $("#"+$(this).attr('id')+"show").toggle(this.checked);
});

Vielen Dank im Vorraus
 
Funktioniert bei mir einwandfrei. Das Javascript benutzt jQuery, hast Du jQuery eingebunden? Und das Javascript muss hinter dem HTML stehen.
 
Habe bei mir ganz unten das stehen

Code: 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
 
Das ist schon mal gut. Die Reihenfolge muss wie folgt sein:
1. HTML
2. Die Einzüge, die Du zuletzt gepostet hast
3. Das Javascript/jQuery.
(die Einzüge können auch im Head stehen)
 
Also ich glaube ich sehe gerade den Wald voller Bäume nicht:

mein head hat folgendes:

HTML: 
<link rel="stylesheet" href="css/css.css">
dann kommt im <body> Teil mein HTML Code

ganz unten dann:

HTML: 
<script type="text/javascript" src="js/code.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>

in der js/code.js ist der JavaScript Code drin aber es klappt bei mir einfach nicht
 
Kein Wunder, dass es nicht klappt: Das Javascript muss nach den Einzügen von jQuery kommen, so:
Code: 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type="text/javascript" src="js/code.js"></script>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück