问使用jQuery自动分配树加载中的待定复选框
EN

Stack Overflow用户

提问于 2018-06-08 10:47:24

回答 1查看 223关注 0票数 4

我试图使用jQuery在树中自动分配待定复选框。我能够从数据库中检索数据，然后生成树，但是它不会自动分配待定复选框。如何使用jQuery重新检查所有内容，然后分配它？

我只能通过再次单击这些复选框来手动分配它。我的小提琴如下：https://jsfiddle.net/p86qwz12/1/

待定的复选框应该是在保罗邦扬，巨人和高大的东西，一旦树被加载。

这是jQuery代码，但只有当我手动单击复选框时，它才会检查。

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

<!DOCTYPE html>

<body>
  <!-- Raw working example from site http://css-tricks.com/indeterminate-checkboxes/ -->

  <b>Raw working example</b>
  <p>
    <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" checked 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>
                <ul>
                  <li>
                    <input type="checkbox" checked name="tall-2-2-1" id="tall-2-2-1">
                    <label for="tall-2-2-1">Son</label>
                  </li>
                  <li>
                    <input type="checkbox" name="tall-2-2-2" id="tall-2-2-2">
                    <label for="tall-2-2-2">Daughter</label>
                  </li>
                </ul>
              </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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

它如何在装载时重新检查从孩子的底部到顶部的一切？谢谢

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-11 08:00:50

我做了一些编辑，比如使用变量拥有选择器，删除无用的var siblings以使代码更易读懂。

诀窍是在加载时对每个复选框进行检查。

var cbSelector = 'input[type="checkbox"]';

function checkSiblings(el, checked) {

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

  el.siblings().each(function() {
    return all = ($(this).children(cbSelector).prop("checked") === checked);
  });

  if (all && checked) {

    parent.children(cbSelector).prop({
      indeterminate: false,
      checked: checked
    });

    checkSiblings(parent);

  } else if (all && !checked) {

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

  } else {

    el.parents("li").children(cbSelector).prop({
      indeterminate: true,
      checked: false
    });

  }

}

$(cbSelector).change(function(e) {

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

  container.find(cbSelector).prop({
    indeterminate: false,
    checked: checked
  });

  checkSiblings(container, checked);
});

$(function() {
  var $checkedCbs = $("#cbFirstLevel").find(cbSelector).filter(":checked");
  console.info("CHECKBOXES COUNT: ", $checkedCbs.length);
  $checkedCbs.each(function() {
    $liContainer = $(this).parent("li");
    checkSiblings($liContainer, true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cbFirstLevel">
  <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" checked 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>
            <ul>
              <li>
                <input type="checkbox" checked name="tall-2-2-1" id="tall-2-2-1">
                <label for="tall-2-2-1">Son</label>
              </li>
              <li>
                <input type="checkbox" name="tall-2-2-2" id="tall-2-2-2">
                <label for="tall-2-2-2">Daughter</label>
              </li>
            </ul>
          </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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50758959

复制

相似问题

问使用jQuery自动分配树加载中的待定复选框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery自动分配树加载中的待定复选框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery自动分配树加载中的待定复选框
EN