时间戳

首页 > 解决方案 > 如果父列表项未隐藏，jquery检查项目

jquery - 如果父列表项未隐藏，jquery检查项目

问题描述

我有一个“全选”复选框。我想为每个包含该类的复选框进行迭代cb-org并设置checked属性，但前提是父列表项元素没有hidden应用该类。

这样做的原因是因为我有一个客户端过滤器，所以并非所有列表项都是可见的，我不希望我的“全选”为checked当前隐藏的项目设置属性。

$('#organisations-selectall').change(function() {
  $('.cb-org').each(function (i, obj) {
    if (!$(obj).parent('li').hasClass('hidden')) {
      $(obj).prop('checked', this.checked);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="input-group">
      <span class="input-group-addon">Filter</span>
    	<input id="org-filter" type="text" class="form-control">
    </div>
  </li>
  <li>
    <div class="checkbox">
      <label>
        <input id="organisations-selectall" type="checkbox">
        <strong>Select All</strong>
      </label>
    </div>
  </li>
  <li class="attr-org-entity hidden">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 1
      </label>
    </div>
  </li>
  <li class="attr-org-entity">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 2
      </label>
    </div>
  </li>
  <li class="attr-org-entity">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 3
      </label>
    </div>
  </li>
</ul>

标签： jquery

解决方案

您可以利用 jQuery 的继承循环，因此您不必自己编写它。

  1. 找到所有的复选框
  2. 获取他们的父 li，无论它在 DOM 树的位置有多高
  3. 过滤 li 以仅获取那些没有hidden类的
  4. 对于过滤后的 li，找到它们的嵌套复选框
  5. 更改他们的选中属性

$('#organisations-selectall').change(function(e) {
  $('.cb-org')
    .closest('li')
    .filter(':not(.hidden)')
    .find('.cb-org')
    .prop('checked', this.checked);
});
.hidden { color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="input-group">
      <span class="input-group-addon">Filter</span>
    	<input id="org-filter" type="text" class="form-control">
    </div>
  </li>
  <li>
    <div class="checkbox">
      <label>
        <input id="organisations-selectall" type="checkbox">
        <strong>Select All</strong>
      </label>
    </div>
  </li>
  <li class="attr-org-entity hidden">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 1
      </label>
    </div>
  </li>
  <li class="attr-org-entity">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 2
      </label>
    </div>
  </li>
  <li class="attr-org-entity">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 3
      </label>
    </div>
  </li>
</ul>

推荐阅读