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

debugcn 发表于 Dev

Gh0sT

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

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

});

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

密码器

用检查工具看看那里发生了什么。
Item 1 复选框对被点击做出反应，并进行了一系列更改。

这是一个丑陋的解决方法，可以让您继续前进。
丑陋但有效的小提琴

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。