Javascript jQuery复选框更改事件以通过另一个复选框展开可折叠

请参阅：
表1是可折叠的，其中包含嵌套可折叠的“项”。 每个“项目”折叠状态都由使用引导控件的项目标题上的复选框控制。
选项卡1还控制一个“全选”复选框，该复选框使用JS选择所有“项目”的复选框

<div class="collapse-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
    <div class="card-header" role="tab" id="heading-1">
    <h5 class="mb-0">
        <a class="d-block" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
        Tab 1
        <span class="float-right">Select All <input type="checkbox" id="sa_foo" name="sa_foo" data-checkbox-name="foo" class="selectall"/></span>
        </a>
    </h5>
    </div>
    <div id="collapse-1" class="collapse" role="tabpanel" aria-labelledby="heading-1">
        <div class="card-body">
            <div id="accordion-1">
                <div class="card">
                    <div class="card-header" id="heading-1-1">
                    <h5 class="mb-0">
                        <a class="collapsed">
                        Item 1
                        </a>
                        <span class="float-right"><input type="checkbox" id="foo_1" name="foo" value="1" data-select-all="sa_foo" class="checkme" data-toggle="collapse" data-target="#collapse-1-1"/></span>
                    </h5>
                    </div>
                        <div id="collapse-1-1" name="foo" class="collapse" aria-labelledby="heading-1-1">
                        <div class="card-body">
                            Text 1
                        </div>
                        </div>
                </div>
            </div>      
        </div>
    </div>
</div>

}))

使用此设置，我希望“全选”复选框也能控制嵌套“项目”的显示/隐藏，但事实并非如此。
我缺少什么？

使用

。单击（）

而不是

。prop

---

此处演示

使用检查工具查看此处发生的情况。
项目1复选框对被单击作出反应，并进行了一系列更改

这是一个难看的工作区，应该会让你走的。

---

Tab 1和Select All位于同一标记内，因此执行相同的操作。全选将需要自己的标记和事件处理程序。也就是说，对齐选项卡1并全选。为了防止“全选”扩展标题，我添加了event.stopPropagation（）。将“全选”放在该锚点内不是一个好的解决方案。停止传播是由该错误解决方案导致的错误修复。当“全选”处于悬停状态时，Tab 1锚点被修饰。@Gh0sT我会使用div或其他东西进行设计对齐，并让它们拥有自己的和事件处理程序，我仍然认为这就是问题所在。。这是可行的。你为什么说它难看？在你看来，还有什么更好的方法。对不起，我对前端的东西很生疏。正如马修·佩奇所说的，把它分开（看看他的小提琴）。我的版本很难看，因为它没有分开，仍然使用stop.propagation拐杖。但它有一个复选框标签；）学习使用检查器和控制台。开发者工具是一个很大的帮助。好的。非常感谢。最后一个问题。如果我快速双击嵌套的“Items”复选框，它的功能是颠倒的。这意味着选中可折叠，取消选中可展开。我该怎么阻止呢？这是手风琴密码中的一个问题。动画的取消/折叠过程需要时间，多次单击会把事情搞砸。应在动画期间禁用该复选框。现在就用复杂的方法来解决这个问题。手风琴代码需要分析和修改。也许手风琴的作者愿意帮你。@Gh0sT是的，动画绑定在

点击
事件上。如果答案对您有效，请接受：）
$(document).ready(function(){
// Select All checkbox should not expand accordion header
$(".selectall").on("click", function(event) {
    event.stopPropagation();
});
    // Select all Items once Select All checkbox is clicked
$(':checkbox.selectall').on('click', function(){
  $(':checkbox[name="' + $(this).data('checkbox-name') + '"]').prop("checked", $(this).prop("checked"));
});

$(document).ready(function(){
    // Select All checkbox should not expand accordion header
    $(".selectall").on("click", function(event) {
        event.stopPropagation();
    });
    // Select all Items once Select All checkbox is clicked
    $(':checkbox.selectall').on('click', function(){
        //$(':checkbox[name="' + $(this).data('checkbox-name') + '"]').prop("checked", $(this).prop("checked"));
        $(':checkbox[name="' + $(this).data('checkbox-name') + '"]').click();
    });
});