Question

请参考：https://jsfiddle.net/3msLwfu6/1/
选项卡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>

JS

$(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"));
});

}）；

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

Answer 1

使用检查工具查看那里发生的事情。
“项目1”复选框对被单击做出反应，并进行了大量更改。

这是一个丑陋的工作环境，应带您去。
ugly but working fiddle

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

<h1>Use text shadow, <span>don't clone</span> your HTML!</h1>

Answer 2

使用.click()代替.prop

在此处演示https://jsfiddle.net/8jmsten3/

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

2 个答案: