javascript - 选中/取消选中 MVC 中的所有 CheckboxFor

Question

作为我之前的 question 的延续处理 MVC 中的复选框。我一直在这样做this从这里question但由于 MVC 的 CheckBoxFor 创建的隐藏字段，它似乎不起作用。知道为什么吗？这是我的fiddle显示实际的 html

我来自 CheckboxFor 的实际 html:

<form role="form">

                <ul class="col-xs-3">
                    <li class="checkbox checkbox-info">
                        <input id="1" name="[0].IsSelected" type="checkbox" value="true"><input name="[0].IsSelected" type="hidden" value="false">
                        <label for="1"><b>Faa</b></label>

                    </li>
                        <li class="checkbox checkbox-info col-xs-offset-1">
                            <input id="2" name="[0].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[0].SubsCategories[0].IsSelected" type="hidden" value="false">
                            <label for="2">Faa1</label>

                        </li>
                </ul>
                <ul class="col-xs-3">
                    <li class="checkbox checkbox-info">
                        <input id="3" name="[1].IsSelected" type="checkbox" value="true"><input name="[1].IsSelected" type="hidden" value="false">
                        <label for="3"><b>Fee</b></label>

                    </li>
                        <li class="checkbox checkbox-info col-xs-offset-1">
                            <input id="4" name="[1].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[1].SubsCategories[0].IsSelected" type="hidden" value="false">
                            <label for="4">Fee1</label>

                        </li>
                        <li class="checkbox checkbox-info col-xs-offset-1">
                            <input id="5" name="[1].SubsCategories[1].IsSelected" type="checkbox" value="true"><input name="[1].SubsCategories[1].IsSelected" type="hidden" value="false">
                            <label for="5">Fee2</label>

                        </li>
                </ul>
                <ul class="col-xs-3">
                    <li class="checkbox checkbox-info">
                        <input id="6" name="[2].IsSelected" type="checkbox" value="true"><input name="[2].IsSelected" type="hidden" value="false">
                        <label for="6"><b>Fii</b></label>

                    </li>
                        <li class="checkbox checkbox-info col-xs-offset-1">
                            <input id="7" name="[2].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[2].SubsCategories[0].IsSelected" type="hidden" value="false">
                            <label for="7">Fii1</label>

                        </li>
                        <li class="checkbox checkbox-info col-xs-offset-1">
                            <input id="8" name="[2].SubsCategories[1].IsSelected" type="checkbox" value="true"><input name="[2].SubsCategories[1].IsSelected" type="hidden" value="false">
                            <label for="8">Fii2</label>

                        </li>
                </ul>
                <ul class="col-xs-3">
                    <li class="checkbox checkbox-info">
                        <input id="9" name="[3].IsSelected" type="checkbox" value="true"><input name="[3].IsSelected" type="hidden" value="false">
                        <label for="9"><b>Foo</b></label>

                    </li>
                        <li class="checkbox checkbox-info col-xs-offset-1">
                            <input id="10" name="[3].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[3].SubsCategories[0].IsSelected" type="hidden" value="false">
                            <label for="10">Foo1</label>

                        </li>
                </ul>
                <ul class="col-xs-3">
                    <li class="checkbox checkbox-info">
                        <input id="11" name="[4].IsSelected" type="checkbox" value="true"><input name="[4].IsSelected" type="hidden" value="false">
                        <label for="11"><b>Fuu</b></label>

                    </li>
                </ul>
                <ul class="col-xs-3">
                    <li class="checkbox checkbox-info">
                        <input id="12" name="[5].IsSelected" type="checkbox" value="true"><input name="[5].IsSelected" type="hidden" value="false">
                        <label for="12"><b>Bee</b></label>

                    </li>
                </ul>
                <ul class="col-xs-3">
                    <li class="checkbox checkbox-info">
                        <input id="13" name="[6].IsSelected" type="checkbox" value="true"><input name="[6].IsSelected" type="hidden" value="false">
                        <label for="13"><b>Bii</b></label>

                    </li>
                        <li class="checkbox checkbox-info col-xs-offset-1">
                            <input id="14" name="[6].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[6].SubsCategories[0].IsSelected" type="hidden" value="false">
                            <label for="14">Bii1</label>

                        </li>
                </ul>

</form>

我正在尝试检查标题，并且所有子复选框都将被选中，如果所有子复选框都被选中，则父复选框将被选中，反之亦然。

我正在尝试处理的js:

$('li :checkbox').on('click', function () {
    var $chk = $(this),
        $li = $chk.closest('li'),
        $ul, $parent;
    if ($li.has('ul')) {
        $li.find(':checkbox').not(this).prop('checked', this.checked)
    }
    do {
        $ul = $li.parent();
        $parent = $ul.siblings(':checkbox');
        if ($chk.is(':checked')) {
            $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
        } else {
            $parent.prop('checked', false)
        }
        $chk = $parent;
        $li = $chk.closest('li');
    } while ($ul.is(':not(.someclass)'));
});

更新:我在下面答案的帮助下使它工作。这是 fiddle 中的有效答案。我确实遵循了建议，设置了复选框是否为父复选框的标志。为了安全起见，我还添加了 child-li 类，这样我就不会使用 Bootstrap col-xs-offset-1，它可能随时发生变化。非常感谢!

Answer 1

首先，(正如评论中所指出的)，如果您在某处指出哪个是父复选框，哪个是子复选框，就会容易得多。在提供的代码中，这可以隐含为子 li 具有类“col-xs-offset-1” - 但是这是一个布局类，因此不应该用于语义含义，因为布局可能会改变。

因此，使用当前的 html，您可以通过执行以下操作来确定复选框是否为父级:

var isparent = !$(this).closest("li").is(".col-xs-offset-1");

如上所述，我们建议不要这样做 - 只需使用所提供的内容即可。相反，您应该添加类(在下面的示例中添加了“parentCheckbox”和“childCheckbox”)

<ul class="col-xs-3">
    <li class="checkbox checkbox-info">
        <input class='parentCheckbox' id="1" name="[0].IsSelected" type="checkbox" value="true"><input name="[0].IsSelected" type="hidden" value="false">
        <label for="1"><b>Faa</b></label>

    </li>
    <li class="checkbox checkbox-info col-xs-offset-1">
        <input class='childCheckbox' id="2" name="[0].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[0].SubsCategories[0].IsSelected" type="hidden" value="false">
        <label for="2">Faa1</label>
    </li>
</ul>

然后使用:

var isparent = $(this).is(".parentCheckbox");

(当然，您只需要向父级添加一个类，但这样以后可以更轻松地显式声明父级/子级，并且如果更有意义，您可以将它们添加到 li 中使用 MVC/Razor 构建时)。

然后在单独的例程中处理父复选框和子复选框。

勾选父项后，更新除父项之外的所有复选框以匹配父项:

var checked = chk.is(":checked");
chk.closest("ul")
   .find(":checkbox")
   .not(chk)
   .prop('checked', checked);

当一个子项被勾选时，检查是否所有子项复选框都被勾选并更新父项:

var parent = chk.closest("ul")
                .find("li:not(.col-xs-offset-1)")
                .find(":checkbox");
var children = chk.closest("ul")
                  .find("li.col-xs-offset-1")
                  .find(":checkbox");

if (children.filter(":checked").length == children.length)
    parent.prop("checked", true);
else
    parent.prop("checked", false);

以下内容已添加到您的 html jsfiddle 中: http://jsfiddle.net/3xczqogy/6/

最后，布局 html 来指示父/子并不是 html 的工作方式 - 它可能会帮助您弄清楚发生了什么，但有更好的方法可以做到这一点。 (在问题代码中，“子”(实际上是同级)li 用空格缩进，没有其他标记/节点)。