close/open checkbox dla wielu elementów

0

Cześć, robie dość duży formularz i potrzebuje kilka checkboxów po których zaznaczeniu wyświetlają sie kolejne formularze.

Dla przykładu:

Śniadanie: checkbox(tak/nie), jeżeli jest zaznaczony to wyskakuje kolejny formularz
Obiad: checkbox(tak/nie), jeżeli jest zaznaczony to wyskakuje kolejny formularz

Mam nadzieje, że wiecie o co mi chodzi :D
I teraz tak, mam juz taki kod:

HTML

        <form action="" method="POST"> 
             <label for="">test</label>
             <input id="open" type="checkbox" onclick="open_content()">
             <div style="display:none" class="next-part" id="content">
                <textarea class="form-control" name="text" cols="30" rows="10"></textarea>
             </div>
         </form>

JS

            function open_content() {
              var status = document.getElementById("open");
              var content = document.getElementById("content");
              if (status.checked == true){
                content.style.display = "block";
              } else {
                content.style.display = "none";
              }
            }

I to fajnie działa, tylko, że na jednym elemencie, a ja potrzebuje na ok. 30 elementów i mogłbym porobić 30 takich funkcji, ale pewnie jest na to lepszy sposób.

PS Moja wiedza z jsa jest zerowa :c

2

Nie potrzebujesz do tego JS. Wystarczy ci CSS i zapis w stylu:

<style>
  form#f_jeden {display:none;}
  input#i_jeden:checked ~ form#f_jeden {display:block;}
</style>

<input type="checkbox" id="i_jeden">
jakieś bzdety pomiędzy
<form id="f_jeden">treść formularza</form>
0

@Freja Draco:
A jak juz użyłem zapis:
input[type="checkbox"]:checked ~ span:nth-child(2):before
{
xx;
}
to drugi raz uzyć nie moge

input[type="checkbox"]:checked ~ div#f_jeden {display:block;}

1

Zapis:

input[type="checkbox"]:checked

Nie identyfikuje pojedynczego elementu, tylko wszystkie zaznaczone czekboksy na stronie.
Bez operowania na id-ach raczej się nie obejdzie. No chyba, że chcesz się bawić np. w jakieś nth-of-type, ale ro raczej utrudnianie sobie życia.

3

A po co Ci 30 funkcji, przecież wystarczy dać funkcji parametry:

            function open_content(checkboxId, contentToOpen) {

              const status = document.getElementById(checkboxId);
              const content = document.getElementById(contentToOpen);

              if (status.checked == true){
                content.style.display = "block";
              } else {
                content.style.display = "none";
              }
            }

i potem w html'u je przekazywać:

 <input id="open" type="checkbox" onclick="open_content('open','content')">

1 użytkowników online, w tym zalogowanych: 0, gości: 1