如何检查是否所有的兄弟姐妹(包括选中的兄弟姐妹)都用jQuery检查了? [英] How to check if all siblings (including selected) are checked with jQuery?

问题描述

我正在尝试仅获取所选元素的同级元素，但找不到适合此方法的适当方法或实现该方法的方法.我总是使用find()方法和children()来获取整棵树.

I'm trying to get only siblings of selected element but can't find a proper method for this or a way to achieve it. I always get the whole tree with find() method and with children() I can't get it to work.

此点击应类似于复选框树:

This clicking should work like a checkbox tree:

如果单击父级"，则应单击所有子级；如果取消选中父级"，则必须不选中所有子级.

If you click parent all children should be clicked and if you uncheck parent, all children must be unchecked.

但是不起作用的是，如果您选中了一个复选框并且未单击所有同级，则父项必须不确定！

But the thing that doesn't work is if you check a checkbox and all siblings are not clicked then the parent must indeterminate!

上面的父级也必须不确定.

And also parent above must be undeterminate.

所以我真正需要的是获取选定复选框的父级，然后收集子级并检查是否全部选中.如果是，则将父级设置为选中状态，否则父级必须不确定.但是问题是jquery深入了…….我只需要第一个孩子，而不需要下面的所有东西.

So what I actually need is to get the parent of selected checkbox and then collect the children and check if they all are checked. If yes then set parent as checked if not then parent must be indeterminate. But the problem is that jquery goes to deep.... and i need only the first children, and not everything underneath.

$(document).on('change', 'input.parent_cat_0', function() {
  var mainPermission = $(this);
  var mainPermissionChildren = mainPermission.parent().find('input:checkbox');
  if (mainPermission.is(':checked')) {
    mainPermissionChildren.each(function() {
      this.indeterminate = false;
      this.checked = true;
    });
  } else {
    mainPermissionChildren.each(function() {
      this.indeterminate = false;
      this.checked = false;
      $(this).removeClass("displayNone").next("img.tick").remove();
    });
  }
});

$(document).on('change', 'input.docPermission:not(.parent_cat_0)', function() {
  var selected = $(this);
  var liParents = selected.parents('li');
  var allCheckboxes = liParents.find('input:checkbox');
  var childrenOfSelected = selected.parent().find('input:checkbox');
  var upperParents = $(allCheckboxes).not(childrenOfSelected).get();

  if (selected.is(':checked')) {
    childrenOfSelected.prop('indeterminate', false);
    childrenOfSelected.prop('checked', true);

    //console.log('Total upper parents:', upperParents.length);

    $(upperParents).each(function (i,e) {
      // HOW TO GET ONLY FIRST SIBLINGS
      // For example if you click on Form 1
      // you should get only (Form 1a, Form 1b, Form 1c)
      // but NOT 'Form 1aa'
      //console.log($(e));
    });

  } else {
    childrenOfSelected.prop('indeterminate', false);
    childrenOfSelected.prop('checked', false);
  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="main">
  <input type="checkbox" id="cat_52" class="docPermission  parent_cat_0" name="localPerm[]">
  <label class="strong" for="cat_52">Forms</label>
  <ul>
    <li>
      <input type="checkbox" id="cat_53" class="docPermission  parent_cat_52" name="localPerm[]">
      <label class="strong" for="cat_53">Form 1</label>
      <ul>
        <li>
          <input type="checkbox" id="cat_55" class="docPermission  parent_cat_53" name="localPerm[]">
          <label class="strong" for="cat_55">Form 1a</label>
          <ul>
            <li>
              <input type="checkbox" id="cat_56" class="docPermission  parent_cat_55" name="localPerm[]">
              <label class="strong" for="cat_56">Form 1aa</label>
            </li>
          </ul>
        </li>
        <li class="main">
          <input type="checkbox" id="doc_80" class="docPermission  parent_cat_53" name="localPerm[]">
          <label for="doc_80">Form 1b</label>
        </li>
        <li class="main">
          <input type="checkbox" id="doc_82" class="docPermission  parent_cat_53" name="localPerm[]">
          <label for="doc_82">Form 1c</label>
        </li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="cat_54" class="docPermission  parent_cat_52" name="localPerm[]">
      <label class="strong" for="cat_54">Form 2</label>
    </li>
  </ul>
</li>

推荐答案

您可以尝试 siblings()和 andSelf()

$(document).on('change', 'input:checkbox', function(e) {
  const $this = $(this);

  if (!e.isTrigger) {
    $this
      .siblings('ul')
      .find('input:checkbox')
      .prop('checked', this.checked);
  }

  const $children = $this.parent('li').siblings().addBack();
  const $ckb = $children.find('> input:checkbox');

  const total = $ckb.length;
  const checked = $ckb.filter(':checked').length;
  const indeter = $ckb.filter(function() {
    return this.indeterminate;
  }).length;

  $this
    .parents('ul:first')
    .siblings('input:checkbox')
    .prop({
      checked: checked === total,
      indeterminate: indeter > 0 || (checked > 0 && checked < total)
     })
    .trigger('change')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul>
  <li class="main">
    <input type="checkbox" id="cat_52" class="docPermission  parent_cat_0" name="localPerm[]">
    <label class="strong" for="cat_52">Forms</label>
    <ul>
      <li>
        <input type="checkbox" id="cat_53" class="docPermission  parent_cat_52" name="localPerm[]">
        <label class="strong" for="cat_53">Form 1</label>
        <ul>
          <li>
            <input type="checkbox" id="cat_55" class="docPermission  parent_cat_53" name="localPerm[]">
            <label class="strong" for="cat_55">Form 1a</label>
            <ul>
              <li>
                <input type="checkbox" id="cat_56" class="docPermission  parent_cat_55" name="localPerm[]">
                <label class="strong" for="cat_56">Form 1aa</label>
              </li>
            </ul>
          </li>
          <li class="main">
            <input type="checkbox" id="doc_80" class="docPermission  parent_cat_53" name="localPerm[]">
            <label for="doc_80">Form 1b</label>
          </li>
          <li class="main">
            <input type="checkbox" id="doc_82" class="docPermission  parent_cat_53" name="localPerm[]">
            <label for="doc_82">Form 1c</label>
          </li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="cat_54" class="docPermission  parent_cat_52" name="localPerm[]">
        <label class="strong" for="cat_54">Form 2</label>
      </li>
    </ul>
  </li>
</ul>

这篇关于如何检查是否所有的兄弟姐妹(包括选中的兄弟姐妹)都用jQuery检查了?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！