Question

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

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

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

我在网上找到了解决方案，但是，它们都过于复杂，或者没有使用实际的dev-server作为复选框。我认为必须有一种简单的方法来处理这个问题。

活动模型：

<input type="checkbox">

Razor Helper：

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

JQuery的：

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

帮助者/模型在这里可能无关紧要。如果没有选择任何子项，如果某些子项被选中/取消选中父项，那么JS实际上需要针对复选框层次结构进行推广，如果选择父项，则检查所有子项。

此外，实际值（$(function () { $("input[type='checkbox']").change(function () { var val = $(this).val(); $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked); }); });）仅对我这个帖子中最远的孩子很重要。层次结构仅用于此特定情况，以便更轻松地选择这些节点。没有孩子的已检查父级的值与我无关。

我感谢任何帮助。我已经在这一天工作了一天，JS / JQuery对我来说不是一个优势。我也试图使用Kendo UI和jstree，但它在我的情况下并不起作用。我认为它比这些工具包提供的更简单。

Answer 1

Article about indeterminate checkboxes

Codepen来自上述文章。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: