如何检查是不是所有兄弟姐妹（包括选定的）都用 jQuery 检查？

Posted 2023-05-09

技术标签:

【中文标题】如何检查是不是所有兄弟姐妹（包括选定的）都用 jQuery 检查？【英文标题】：How to check if all siblings (including selected) are checked with jQuery?如何检查是否所有兄弟姐妹（包括选定的）都用 jQuery 检查？ 【发布时间】：2019-10-29 02:50:46 【问题描述】：

我试图只获取所选元素的兄弟姐妹，但找不到合适的方法或实现它的方法。我总是用 find() 方法得到整棵树，而用 children() 我不能让它工作。

这种点击应该像复选框树一样工作：

如果单击父级，则应单击所有子级，如果取消选中父级，则必须取消选中所有子级。

但不起作用的是，如果您选中一个复选框并且所有兄弟姐妹都没有被点击，那么父母必须是不确定的！

而且上面的父级也必须是不确定的。

所以我真正需要的是获取选中复选框的父级，然后收集子级并检查它们是否都被选中。如果是，则将 parent 设置为选中，如果不是，则 parent 必须是不确定的。但问题是 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>

【问题讨论】：

首先我们可以澄清一下，在你的代码中你写了if you click on Form 1 you should get only (Form 1a, Form 1b, Form 1c)但是不是form 1a, 1b, 1c不是form 1的孩子吗？您的代码有将近 50 行，我们如何猜测您要修复的 find() 是什么？有很多.. @DontVoteMeDown 评论部分很重要。您是否能够为元素动态添加属性以识别它们？您可以执行类似data-scope="level1" 的操作（其中数字每增加一级）。然后它只是抓住data-scope并选择被点击的元素，然后选择下一个级别（level + 1）你想要$(this).siblings().first()？ 【参考方案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>

【讨论】：

这工作 90% 只有一件事....当您单击父级时，还应检查所有子级。但我想我可以解决这个问题......无论如何，非常感谢。改进了您的代码以将 indeterminate 递归到父母。 @RokoC.Buljan > 0 indeterminate 条件可以忽略。我说的对吗？ @AswinKumar 没错。可以将全文写为indeter || checked && checked < total。取决于你想要它的可读性。【参考方案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>

【讨论】：

以上是关于如何检查是不是所有兄弟姐妹（包括选定的）都用 jQuery 检查？的主要内容，如果未能解决你的问题，请参考以下文章

选择除兄弟姐妹和自我之外的所有元素

如何让 React 中的 onClick 处理具有多个兄弟姐妹的单个元素？

如何获取不是兄弟姐妹的特定类的上一个和下一个元素

如何使用 css 选择器从特定类中查找所有下一个兄弟姐妹

Flutter - 当兄弟姐妹灵活时，扩展不会占用所有可用空间

php 而不是列出当前页面的所有子孙的wp_list_pages，此方法列出了父页面，兄弟姐妹