JQuery 包括 ASP.NET MVC 复选框层次结构中父级的不确定复选框

Question

我的 ASP.NET MVC 应用程序中有一个父子层次结构的复选框。我有它的工作，如果你选择一个父母，孩子们都被选中。但是，如果您取消选择他们的孩子，我希望父母变得不确定。

Jsfiddle：https://jsfiddle.net/vx4zvabg/2/

例如，如果您选中管理员，则在下面的子项中选中所有复选框。但是，如果孩子未被检查，我希望它使父母不确定。此外，如果没有选中子项，则完全取消选中父项。

我在网上找到了解决方案，但是，它们都过于复杂或不使用实际的<input type="checkbox"> 作为复选框。我认为必须有一个简单的方法来处理这个问题。

活动模型：

public class Activity
{
    public int ActivityId { get; set; }
    public string Name { get; set; }
    public bool IsAllowed { get; set; }
    public IList<Activity> Children { get; set; } = new List<Activity>();
}

剃刀助手：

@helper CheckBoxShowTree(IEnumerable<Activity> parents)
{
    var Html = ((System.Web.Mvc.WebViewPage)WebPageContext.Current.Page).Html;
    <ul style="list-style:none;">
        @foreach (var child in parents)
        {
        <li>
            @Html.HiddenFor(x => child.ActivityId)
            @Html.HiddenFor(x => child.Name)
            @Html.CheckBoxFor(x => child.IsAllowed, new { @class = "groupsusers-checkbox", @style = "margin-right:5px; cursor:pointer;", @value = child.ActivityId })
            @Html.LabelFor(x => child.IsAllowed, child.Name, new { @class = "build-checkbox-label", @style = "font-weight:normal; margin-top:-2px;" })
            @if (child.Children.Any())
            {
            @CheckBoxShowTree(child.Children)
            }
        </li>
        }
    </ul>
}

JQuery:

$(function () {
    $("input[type='checkbox']").change(function () {
        var val = $(this).val();
        $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);

    });
});

Helper / Model 在这里可能无关紧要。 JS 确实需要针对复选框层次结构进行概括，并且如果选择了父项则检查所有子项/如果选择了一些子项则不确定/如果没有选择子项则取消选中父项。

此外，实际值 (value="true") 仅对我在帖子上最远的孩子很重要。层次结构仅在这种特殊情况下使用，以使选择这些节点更容易。没有孩子的检查父母的价值与我无关。

感谢您的帮助。我已经做了一天多了，JS / JQuery 对我来说不是一个强项。我也尝试过使用 Kendo UI 和 jstree，但在我的情况下它不起作用。我认为它比那些套件提供的更简单。

Answer 1

Article about indeterminate checkboxes

Codepen来自上述文章。

来自 Codepen 的代码，根据 SO 要求，附有实际代码的链接：

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

  var checked = $(this).prop("checked"),
      container = $(this).parent(),
      siblings = container.siblings();

  container.find('input[type="checkbox"]').prop({
    indeterminate: false,
    checked: checked
  });

  function checkSiblings(el) {

    var parent = el.parent().parent(),
        all = true;

    el.siblings().each(function() {
      return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
    });

    if (all && checked) {

      parent.children('input[type="checkbox"]').prop({
        indeterminate: false,
        checked: checked
      });

      checkSiblings(parent);

    } else if (all && !checked) {

      parent.children('input[type="checkbox"]').prop("checked", checked);
      parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
      checkSiblings(parent);

    } else {

      el.parents("li").children('input[type="checkbox"]').prop({
        indeterminate: true,
        checked: false
      });

    }

  }

  checkSiblings(container);
});

body {
  padding: 20px;
}
ul { 
  list-style: none;
  margin: 5px 20px;
}
li {
  margin: 10px 0;
}

<h1>Indeterminate Checkboxes</h1>

<ul>
  <li>
    <input type="checkbox" name="tall" id="tall">
    <label for="tall">Tall Things</label>

    <ul>
      <li>
        <input type="checkbox" name="tall-1" id="tall-1">
        <label for="tall-1">Buildings</label>
      </li>
      <li>
        <input type="checkbox" name="tall-2" id="tall-2">
        <label for="tall-2">Giants</label>

        <ul>
          <li>
            <input type="checkbox" name="tall-2-1" id="tall-2-1">
            <label for="tall-2-1">Andre</label>
          </li>
          <li>
            <input type="checkbox" name="tall-2-2" id="tall-2-2">
            <label for="tall-2-2">Paul Bunyan</label>
          </li>
        </ul>
      </li>
      <li>
        <input type="checkbox" name="tall-3" id="tall-3">
        <label for="tall-3">Two sandwiches</label>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" name="short" id="short">
    <label for="short">Short Things</label>

    <ul>
      <li>
        <input type="checkbox" name="short-1" id="short-1">
        <label for="short-1">Smurfs</label>
      </li>
      <li>
        <input type="checkbox" name="short-2" id="short-2">
        <label for="short-2">Mushrooms</label>
      </li>
      <li>
        <input type="checkbox" name="short-3" id="short-3">
        <label for="short-3">One Sandwich</label>
      </li>
    </ul>
  </li>
</ul>