检查父母 jquery 的所有复选框在引导菜单中不起作用答案

【问题标题】：check all checkboxes of parents jquery doesn't work in bootstrap menu检查父母 jquery 的所有复选框在引导菜单中不起作用
【发布时间】：2015-07-02 20:16:29
【问题描述】：

我正在尝试通过单击父复选框来检查所有复选框但此代码不适用于下面的 ul 段

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

如果我使用最接近的而不是兄弟姐妹，它会检查 subs 中的所有复选框，无论父母是谁。

<nav class="main_navigation navbar navbar-default vertical_nav_enable" role="navigation">

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">

            <li class="dropdown">
                <label class="checkbox">
                    <input type="checkbox"/>
                    <a href="/cat1"  class="dropdown-toggle" data-toggle="dropdown">
                        Cat1
                    </a>
                </label>

                <ul class="dropdown-menu multi-level">
                    <li class="dropdown-submenu">
                        <label class="checkbox">
                            <input type="checkbox"/>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="/subcat1">
                                SubCat1
                            </a>
                        </label>
                    </li>
                    <li class="dropdown-submenu">
                        <label class="checkbox">
                            <input type="checkbox"/>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="/subcat2">
                                SubCat2
                            </a>
                        </label>
                    </li>
                    <li class="dropdown-submenu">
                        <label class="checkbox">
                            <input type="checkbox"/>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="/subcat3">
                                SubCat3
                            </a>
                        </label>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <label class="checkbox">
                    <input type="checkbox"/>
                    <a href="/cat2"  class="dropdown-toggle" data-toggle="dropdown">
                        Cat2
                    </a>
                </label>

                <ul class="dropdown-menu multi-level">
                    <li class="dropdown-submenu">
                        <label class="checkbox">
                            <input type="checkbox"/>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="/subcat4">
                                SubCat4
                            </a>
                        </label>
                    </li>
                    <li class="dropdown-submenu">
                        <label class="checkbox">
                            <input type="checkbox"/>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="/subcat5">
                                SubCat5
                            </a>
                        </label>
                    </li>
                    <li class="dropdown-submenu">
                        <label class="checkbox">
                            <input type="checkbox"/>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="/subcat6">
                                SubCat6
                            </a>
                        </label>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

【问题讨论】：

标签： jquery twitter-bootstrap checkbox siblings closest

【解决方案1】：

找到了！在兄弟姐妹之前使用 parent()

 $(function () {
        $("input[type='checkbox']").change(function () {

            $(this).parent().siblings("ul") 
                .find("input[type='checkbox']") 
                .prop("checked", this.checked);

        });
    });

【讨论】：

【解决方案2】：

$(function () {
    $("input[type='checkbox']").change(function () {
        $(this).closest('li')
            .find("input[type='checkbox']")
            .prop("checked", $(this).is(":checked"));

    });
});

Fiddle link

我在此链接中更新了解决方案。

【讨论】：