Javascript 在JQuery中选择子复选框

我试图从从API中重新运行的JSON生成一个折叠的复选框树，实际上树的构建很好，但现在我必须在选中父复选框时处理子复选框的选择

我试图使用类似的方法，但选中复选框时调试的方法甚至没有进入该方法

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

生成折叠复选框树的代码如下

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);
}

问题可能是，由于复选框是动态生成的，因此on.change处理程序无法连接

如果是这样的话，我如何修复它？有没有更好的方法来处理这样的复选框树

我将使用我尝试使用的jquery方法在JSFIDLE中附加一个生成的折叠复选框树的静态版本。

在具有相同直接父级的同一级别选择器中进行函数搜索，而ul包含在元素中，因此我想您需要将同级“ul”替换为：

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