Jak to napisać lepiej - poprawnie

Question

Witam znalazłem  zadanie:

- Stworzyć drzewo z checkboxami, zaznaczenie rodzica powinno        skutkować zaznaczeniem dzieci, odznaczenie któregokolwiek dziecka       odznacza rodzica itd według standardowego wyglądu drzewa.
                - Do zadania proszę wykorzystać tylko HTML, CSS, Vanilla JS
                - Kod powinien mieć możliwość akceptowania dowolnej głębokości zagłębienia drzewa
                - Przykład drzewa:

                <br>a
                <br>--a1
                <br>--a2
                <br>----a21
                <br>----a22
                <br>b
                <br>--b1
                <br>----b11
                <br>----b12
                <br>------b121
                <br>--b2

moj html do tego

  <div id="result">
            
            <input type="checkbox" id="popcorn" name="popcorn"  unchecked  onclick="checkPop()" /> Popcron
            <br>
            <input type="checkbox" id="add1" name="popcornAdd"  unchecked class="add1" onclick="sol()" /> Sól
            <br>
            <input type="checkbox" id="add2" name="popcornAdd" class="add1" unchecked onclick="opakowanie()"/> Okrągle opakowanie
            <br>
            <input type="checkbox" id="add3" name="popcornAdd" class="add1" unchecked onclick="sosy()" /> Sosy
            <br>
            <input type="checkbox" id="add4" name="popcornAdd2" class="add12" unchecked onclick="czekolada()"/> Czekladowy
            <br>
            <input type="checkbox" id="add5" name="popcornAdd2" class="add12" unchecked onclick="ser()"/> Serowy
            <br>
            <input type="checkbox" id="cola" name="cola" /> Coca-Cola
            <br>
            <input type="checkbox" id="add6" name="colaAdd" class="add22" unchecked /> Kostki lodu
            <br>
            <input type="checkbox" id="add7"  name="colaAdd" class="add22" unchecked /> Słomka
            <br>
            <input type="checkbox" id="add8" name="colaAdd2" class="add222" unchecked /> Niebieska
            <br>
            <input type="checkbox" id="add9" name="colaAdd2" class="add222" unchecked /> Rózowa
            <br>
            <input type="checkbox" id="mandm" name="snaks" unchecked /> M&amp;M'sy
            <br>
    
        </div>

 oraz javascript

 

  var popcorn = document.getElementById('popcorn'),
      cola = document.getElementById('cola'),
      mandm = document.getElementById('mandm'),
      sol = document.getElementById('add1'),
      opakowanie = document.getElementById('add2'),
      sos = document.getElementById('add3'),
      czekolada = document.getElementById('add4'),
      ser = document.getElementById('add5'),
      cola = document.getElementById('cola'),
      kostki = document.getElementById('add6'),
      slomka = document.getElementById('add7'),
      niebieska = document.getElementById('add8'),
      rozowa = document.getElementById('add9');
     
        

function checkPop(){
    if (popcorn.checked){
        sol.checked = true;
        opakowanie.checked = true;
        sos.checked = true;
        czekolada.checked = true;
        ser.checked = true;
    } else {
         sol.checked = false;
         opakowanie.checked = false;
         sos.checked = false;
         czekolada.checked = false;
         ser.checked = false;
}
}

function sosy(){
    if (sos.checked){
        czekolada.checked = true;
        ser.checked = true;
    } else {
         sos.checked = false;
         czekolada.checked = false;
         ser.checked = false;
}
}

czuje że robie to źle i jakoś pod górkę. Wydaje mi się bezsensu żeby do każdego kliknięcie przypisywać tyle akcji... Później byłoby to jeszcze bardziej zagmatwane.
Jaką drogą iść, liczę na jakieś wasze podpowiedzi (poziom podstawowy :)).

Może jakoś za pomocą pętli wyjmować parametry z listy lub sa jakies prostsze sposoby?

Pozdrawiam

Comments

Czy to aby nie jest zadanie rekrutacyjne z tego ogłoszenia?

https://www.facebook.com/groups/1485218891734165/permalink/1743153532607365/?sale_post_id=1743153532607365

---

Tak ;) Zadanie to zadanie. Zawsze dobrze potrenować :)

Answer 1

Jak zrobisz sensowną strukturę drzewa (np. dzieląc to na div/fieldset) wówczas można podpiąć jeden listener na cały kontener ze wszystkimi checkboxami i z jego poziomu sprawdzać, jaki checkbox kliknięto.