Question

我尝试通过单击父复选框来检查所有复选框但是这段代码对于下面的ul段不起作用

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

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

<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>

Answer 1

发现它了！在兄弟姐妹之前使用parent（）

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

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

        });
    });

Answer 2

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

    });
});

Fiddle link

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

检查父项jquery的所有复选框在引导程序菜单中不起作用

2 个答案: