Select child checkboxes in JQuery

Question

I'm trying to generate a "collapsing" checkboxes tree from a JSON retruned from my API, actually the tree is build fine but now i have to handle the selection of child checkboxes when the parent is checked,

i was trying to use something like this but the debugged when a checkbox is checked is doesn't even enter inside that method.

$("#sidebar").on("change", "input[type='checkbox']", function () {
    $(this).siblings('ul')
        .find("input[type='checkbox']")
        .prop('checked', this.checked);
});

The code from which i generate the collapsing checkbox tree is the following

var casse = () => {
    var callback = (casse) => {
        var item = []
        $.each(casse, (a, negozio) => {
            const PV = negozio.PV;
            const DS = negozio.DS;
            item.push('<li class="nav-item">')
            item.push('<input type="checkbox" class="check-negozio" value="' + PV + '">')
            item.push('<a class="nav-link collapsed text-truncate" href="#" data-toggle="collapse" data-pv="' + PV + '" data-target="#pv' + PV + '">')
            item.push('<i class="fas fa-store"></i>')
            item.push('<span class="d-none d-sm-inline">' + DS + '</span>')
            item.push('</a>')
            item.push('<div class="collapse" id="pv' + PV + '" aria-expanded="false">')
            item.push('<ul class="flex-column pl-2 nav">')
            $.each(casse[a].CS, (b, cassa) => {
                const CS = cassa.CS;
                if (cassa.OP.length === 0) {
                    item.push('<li class="nav-item">')
                    item.push('<input type="checkbox" class="check-cassa" value="' + CS + '">')
                    item.push('<a class="nav-link py-0" href="#" data-cs="' + PV + CS + '">')
                    item.push('<i class="fas fa-desktop"></i>')
                    item.push('<span>CASSA-' + CS + '</span>')
                    item.push('</a>')
                    item.push('</li>')
                } else {
                    item.push('<li class="nav-item">')
                    item.push('<input type="checkbox" class="check-cassa" value="' + CS + '">')
                    item.push('<a class="nav-link collapsed py-1" href="#" data-toggle="collapse" data-target="#cs' + PV + CS + '" data-cs="' + CS + '">')
                    item.push('<i class="fas fa-desktop"></i>')
                    item.push('<span>CASSA-' + CS + '</span>')
                    item.push('</a>')
                    item.push('<div class="collapse" id="cs' + PV + CS + '" aria-expanded="false">')
                    item.push('<ul class="flex-column nav pl-4">')
                    $.each(cassa.OP, (c, operatori) => {
                        item.push('<li class="nav-item">')
                        item.push('<input type="checkbox" class="check-operatore" value="' + operatori.CODOP + '">')
                        item.push('<a class="nav-link p-1" href="#">')
                        item.push('<i class="far fa-user"></i>')
                        item.push('<span>' + operatori.DESCOP + '</span>')
                        item.push('</a>')
                        item.push('</li>')
                    })
                    item.push('</ul>')
                    item.push('</div>')
                    item.push('</li>')
                }
            })

            item.push('</ul>')
            item.push('</div>')
            item.push('</li>')
        });
        item.push('<hr class="my-auto mt-2" />')
        $('#sidebar').prepend(item.join(""));

    }
    $.get('api/config/', callback);
}

Could the issue be that as the checkboxes are generate dynamically that on.change handler is unabled to get attached?

If so how can i fix it? is there a better way to handle a "checkboxes tree" like that?

I'd attach a static version of one generated collapsing checkboxes tree HERE in JSFiddle with jquery method i was trying to use..

Answer 1

The siblings() function search in the same level selector with same direct parent, while ul is included in element, so I guess you need to replace siblings('ul') with:

$(this).siblings('div').children('ul')