How to link checkbox-elements in a hierarchy-like unordered list?

  Kiến thức lập trình

I want my checkboxes to be linked: when I click on the level 2 checkbocks, I want all checkbockses be affected from starting from level 3. So far, I could come up only with this (I clicked on the level 2 checkbox): my template

My template lookes like this:


<div id="checkbox-list" class="scrollable-list">
    <ul class="checkbox-outer-element">
        <li class="checkbox-inner-element"><input type="checkbox" value="_" id="_"><label for="_">Level 1</label>
            <ul class="checkbox-outer-element">
                <li class="checkbox-inner-element"><input type="checkbox" value="_" id="_"><label for="_">Level
                        2</label>
                    <ul class="checkbox-outer-element">
                        <li class="checkbox-inner-element"><input type="checkbox" value="71" id="71"><label
                                for="_">Level 3</label>
                            <ul class="checkbox-outer-element">
                                <li class="checkbox-inner-element"><input type="checkbox" value="71:0" id="71:0"><label
                                        for="71:0">Level 4</label></li>
                                <li class="checkbox-inner-element"><input type="checkbox" value="71:1" id="71:1"><label
                                        for="71:1">Level 4</label></li>
                                <li class="checkbox-inner-element"><input type="checkbox" value="71:2" id="71:2"><label
                                        for="71:2">Level 4</label></li>
                                <li class="checkbox-inner-element"><input type="checkbox" value="71:3" id="71:3"><label
                                        for="71:3">Level 4</label></li>
                            </ul>
                        </li>
                        <li class="checkbox-inner-element"><input type="checkbox" value="94" id="94"><label
                                for="_">Level 3</label>
                            <ul class="checkbox-outer-element">
                                <li class="checkbox-inner-element"><input type="checkbox" value="94:0" id="94:0"><label
                                        for="94:0">Level 4</label></li>
                                <li class="checkbox-inner-element"><input type="checkbox" value="94:1" id="94:1"><label
                                        for="94:1">Level 4</label></li>
                                <li class="checkbox-inner-element"><input type="checkbox" value="94:2" id="94:2"><label
                                        for="94:2">Level 4</label></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="checkbox-inner-element"><input type="checkbox" value="_" id="_"><label for="_">Level 2</label>
            <ul class="checkbox-outer-element">
                <li class="checkbox-inner-element"><input type="checkbox" value="_"
                        id="_"><label for="_">Level 3</label>
                    <ul class="checkbox-outer-element">
                        <li class="checkbox-inner-element"><input type="checkbox" value="_"
                                id="_"><label for="_">Level 4</label></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>```



I add event listeners to every checkbox I create with my script. My current JS code lookes like this: 

checkbox.addEventListener(‘change’, function () {
var flag = this.checked
var nestedCheckboxes = this.parentElement.querySelector(‘.checkbox-inner-element’).querySelectorAll(‘ul li input[type=”checkbox”]’);
nestedCheckboxes.forEach(function (checkbox) {
checkbox.checked = flag;
checkbox.dispatchEvent(new Event(‘change’));
});
})

I think the problem could be in that I have both <li> and <ul> tags on the same level, but I couldn't come up with the solution yet.

New contributor

baeko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

LEAVE A COMMENT