Checkboxy przełączanie widoczności elementów

0

Witam. Co mam zrobić aby w poniższym kodzie, kliknięcie elementu<input name="event" checked="checked" id="pdb-event" type="checkbox" value="tak">, powodowało chowanie sie i pojawianie elementów <tr class="multi-checkbox">(w zależności od stanu checkboxa). Kod który miałby to wykonać chcę umieścić w nagłówku witryny przy pomocy pluginu Custom CSS & JS.(Jquery mile widziany.) *** P.S. Poniższe elementy zostały wygenerowane przez plugin, co oznacza że nie mogę w żaden sposób edytować ich atrybutów.***

<tr class="checkbox">

              <th for="pdb-event">Wydarzenie</th>
              <td>

                <input name="event" id="pdb-event-default" type="hidden" value="nie">
<input name="event" checked="checked" id="pdb-event" type="checkbox" value="tak">

                                  <span class="helptext">Chcę zostać wolontariuszem podczas ..........................................</span>
      
              </td>

            </tr>
<tr class="multi-checkbox">

              <th for="pdb-enea_days">Dyspozycyjność</th>
              <td>

                <div class="multicheckbox">
<input name="enea_days[]" id="pdb-enea_days-default" type="hidden" value="">
<div class="checkbox-group">
<label for="pdb-enea_days-poniedziaek-3007">
<input name="enea_days[]" checked="checked" id="pdb-enea_days-poniedziaek-3007" type="checkbox" value="Poniedziałek 30.07">
Poniedziałek 30.07</label>
<label for="pdb-enea_days-wtorek-3107">
<input name="enea_days[]" checked="checked" id="pdb-enea_days-wtorek-3107" type="checkbox" value="wtorek 31.07">
wtorek 31.07</label>
<label for="pdb-enea_days-roda-108">
<input name="enea_days[]" checked="checked" id="pdb-enea_days-roda-108" type="checkbox" value="środa 1.08">
środa 1.08</label>
<label for="pdb-enea_days-czwartek-208">
<input name="enea_days[]" checked="checked" id="pdb-enea_days-czwartek-208" type="checkbox" value="czwartek 2.08">
czwartek 2.08</label>
<label for="pdb-enea_days-pitek-308">
<input name="enea_days[]" checked="checked" id="pdb-enea_days-pitek-308" type="checkbox" value="piątek 3.08">
piątek 3.08</label>
<label for="pdb-enea_days-sobota-408">
<input name="enea_days[]" checked="checked" id="pdb-enea_days-sobota-408" type="checkbox" value="sobota 4.08">
sobota 4.08</label>
<label for="pdb-enea_days-niedziela-508">
<input name="enea_days[]" checked="checked" id="pdb-enea_days-niedziela-508" type="checkbox" value="niedziela 5.08">
niedziela 5.08</label>
</div>
</div>

                                  <span class="helptext">W które dni możesz być wolontariuszem?</span>
      
              </td>

            </tr>
<tr class="multi-checkbox">

              <th for="pdb-prefer">Preferowane zadanie</th>
              <td>

                <div class="multicheckbox">
<input name="prefer[]" id="pdb-prefer-default" type="hidden" value="">
<div class="checkbox-group">
<label for="pdb-prefer-trasa-biegowa-408--508">
<input name="prefer[]" id="pdb-prefer-trasa-biegowa-408--508" type="checkbox" value="Trasa biegowa (4.08 | 5.08)">
Trasa biegowa (4.08 | 5.08)</label>
<label for="pdb-prefer-pakowanie-pakietw-startowych-108--208">
<input name="prefer[]" id="pdb-prefer-pakowanie-pakietw-startowych-108--208" type="checkbox" value="Pakowanie pakietów startowych (1.08 | 2.08)">
Pakowanie pakietów startowych (1.08 | 2.08)</label>
<label for="pdb-prefer-biuro-zawodw-308--408">
<input name="prefer[]" id="pdb-prefer-biuro-zawodw-308--408" type="checkbox" value="Biuro Zawodów (3.08 | 4.08)">
Biuro Zawodów (3.08 | 4.08)</label>
<label for="pdb-prefer-punkty-odwieania-408--508">
<input name="prefer[]" id="pdb-prefer-punkty-odwieania-408--508" type="checkbox" value="Punkty odświeżania (4.08 | 5.08)">
Punkty odświeżania (4.08 | 5.08)</label>
<label for="pdb-prefer-start-408--508">
<input name="prefer[]" id="pdb-prefer-start-408--508" type="checkbox" value="Start (4.08 | 5.08)">
Start (4.08 | 5.08)</label>
<label for="pdb-prefer-meta-408--508">
<input name="prefer[]" id="pdb-prefer-meta-408--508" type="checkbox" value="Meta (4.08 | 5.08)">
Meta (4.08 | 5.08)</label>
<label for="pdb-prefer-nagrody-408--508">
<input name="prefer[]" checked="checked" id="pdb-prefer-nagrody-408--508" type="checkbox" value="Nagrody (4.08 | 5.08)">
Nagrody (4.08 | 5.08)</label>
<label for="pdb-prefer-strefa-rodzinna-3-508">
<input name="prefer[]" id="pdb-prefer-strefa-rodzinna-3-508" type="checkbox" value="Strefa rodzinna (3-5.08)">
Strefa rodzinna (3-5.08)</label>
<label for="pdb-prefer-elita-508--608---osoby-z-j-niemieckimrosyjskimangielskiminne---jeeli-wybierasz-to-zadanie-dodaj-w-uwagach-jakie-znasz-jzyki">
<input name="prefer[]" id="pdb-prefer-elita-508--608---osoby-z-j-niemieckimrosyjskimangielskiminne---jeeli-wybierasz-to-zadanie-dodaj-w-uwagach-jakie-znasz-jzyki" type="checkbox" value="Elita (5.08 | 6.08) - (osoby z j. niemieckim/rosyjskim/angielskim/inne - jeżeli wybierasz to zadanie dodaj w uwagach jakie znasz języki)">
Elita (5.08 | 6.08) - (osoby z j. niemieckim/rosyjskim/angielskim/inne - jeżeli wybierasz to zadanie dodaj w uwagach jakie znasz języki)</label>
<label for="pdb-prefer-pomoc-komisji-antydopingowej-408--508">
<input name="prefer[]" id="pdb-prefer-pomoc-komisji-antydopingowej-408--508" type="checkbox" value="Pomoc Komisji Antydopingowej (4.08 | 5.08)">
Pomoc Komisji Antydopingowej (4.08 | 5.08)</label>
<label for="pdb-prefer-rozrabianie-izotonika-308--408">
<input name="prefer[]" id="pdb-prefer-rozrabianie-izotonika-308--408" type="checkbox" value="Rozrabianie izotonika (3.08 | 4.08)">
Rozrabianie izotonika (3.08 | 4.08)</label>
<label for="pdb-prefer-strefa-finishera-408--508">
<input name="prefer[]" id="pdb-prefer-strefa-finishera-408--508" type="checkbox" value="Strefa Finishera (4.08 | 5.08)">
Strefa Finishera (4.08 | 5.08)</label>
<label for="pdb-prefer-vip-room-3-508">
<input name="prefer[]" checked="checked" id="pdb-prefer-vip-room-3-508" type="checkbox" value="Vip Room (3-5.08)">
Vip Room (3-5.08)</label>
<label for="pdb-prefer-media-3-508">
<input name="prefer[]" checked="checked" id="pdb-prefer-media-3-508" type="checkbox" value="Media (3-5.08)">
Media (3-5.08)</label>
</div>
</div>

                                  <span class="helptext">Wybór preferowanego zadania nie gwarantuje pewności przydziału do tego zadania.</span>
      
              </td>

            </tr>
1

Sformatuj jakoś ten kod, bo teraz jest całkowicie nieczytelny.

A co do pytania, to musisz sobie dodać obsługę zdarzenia kliknięcia na tym inpucie, w którym będziesz tworzył nowy element TR i dodawał go do tabeli. Zainteresuj się funkcjami:

document.querySelector()
addEventListener()
document.createElement()

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