Как проверить, все ли братья и сестры (включая выбранные) проверены с помощью jQuery?

Question

Я пытаюсь получить только братьев и сестер из выбранного элемента, но не могу найти подходящий метод для этого или способ достижения этого. Я всегда получаю целое дерево с помощью метода find (), а с children () я не могу заставить его работать.

Этот щелчок должен работать как дерево флажков:

Если вы щелкнете по родительскому элементу, должны быть нажаты все дочерние элементы, а если вы снимите флажок родительский, все дочерние элементы должны быть отключены.

Но то, что не работает, если вы установите флажок и все братья и сестры не нажаты, тогда родитель должен быть неопределенным!

А также родитель, указанный выше, должен быть неопределенным.

Так что мне действительно нужно, чтобы получить родительский флажок, а затем собрать детей и проверить, все ли они отмечены. Если да, то установите родительский флажок как отмеченный, если нет, то родительский элемент должен быть неопределенным. Но проблема в том, что jquery идет вглубь .... и мне нужны только первые дети, а не все под ними.

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

Answer 1

Можно попробовать 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>

Answer 2

Вместо того, чтобы полагаться на SomeParentCheckbox.trigger('change')
мы могли бы рекурсивно обходить родительские группы

• При смене флажков , обрабатывать флажки потомков (любой глубины), устанавливать checked состояние, такое же, как триггерное.
• При изменении флажка , рекурсивно обходить родителей, чтобы установить checked или indeterminate состояний атрибутов

function handleDocPermParent(ckb) {
  // Get group element: (Ideally we would have a 'group' class, but sadly we don't, so let's go tricky for known common selectors)
  const $group = $(ckb).closest('ul');
  const $par   = $group.closest('li');
  
  if (!$par.length) return; // No parent? Recursion job done!
  
  const $par_ckb = $par.find(docPermClass).first(); // Find parent's main checkbox
  const $group_ckb = $group.children('li').children(docPermClass); // Collect all group's checkboxes
  
  const tot = $group_ckb.length; // How many checkboxes?
  const tot_checked = $group_ckb.filter(':checked').length; // How many siblings are checked?
  const tot_indeter = $group_ckb.filter((i, e) => e.indeterminate).length; // How many siblings are indeterminate?
  
  $par_ckb.prop({ // Finally set parent's main checkbox state:
    checked: tot_checked === tot,
    indeterminate: tot_indeter || tot_checked && tot_checked < tot
  });
  
  handleDocPermParent($par_ckb[0]); // Recursively iterate to outer parent
}

const docPermClass = '.docPermission';
const $docPerm = $(docPermClass);

$docPerm.on('change', function (evt) {
  const $ch = $(this).parent().find(docPermClass).not(this);
  $ch.prop({checked: this.checked}); // Handle inner checkboxes (in all childrens, any depth) explicitly:
  handleDocPermParent(this); // Handle parents recursively (from inner to outer) implicitly:
});

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

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>