javascript - 当使用 jquery 或 javascript 选中 2 个复选框时，如何过滤 div 列表？

Question

我有一个包含 4 个 div 的列表，我使用 2 个复选框根据特定 div 的存在来过滤列表。在我选中两个复选框之前，过滤效果很好。

正如您在我下面的代码中看到的，如果您尝试同时选中“Card”和“Paypal”复选框，列表就会消失。相反，我需要显示所有 4 个 div。我怎样才能让它以这种方式工作？

代码如下:

$("#by-card").change(function() {
  $('.store-block .store-payment-options').each(function() {
    if ($(this).find('.card-available').length === 0) {
      $(this).parent(".store-block").toggleClass('hide-me');
    }
  });
});



$("#by-paypal").change(function() {
  $('.store-block .store-payment-options').each(function() {
    if ($(this).find('.paypal-available').length === 0) {
      $(this).parent(".store-block").toggleClass('hide-me');
    }
  });
});

.search-area {
  margin-bottom: 10px;
}

.storesList {
  margin-top: 20px;
}

#count {
  display: inline-block;
}

.store-block {
  width: 80%;
  margin-bottom: 10px;
  padding: 5px;
  background: #e5e5e5;
  position: relative;
  overflow: hidden;
}

.rating {
  position: absolute;
  right: 70px;
  top: 3px;
}

.minorder {
  position: absolute;
  right: 180px;
  top: 3px;
}

.paypal-available,
.card-available {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 11px;
  font-weight: bold;
  color: blue;
}

.right {
  float: right;
}

.left {
  float: left;
}

.hide-me {
  display: none;
}

.checkbox-lab {
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes-area">
  <div class=" inputRadioGroup">
    <input type="checkbox" id="by-card">
    <label for="by-card">Card</label>
  </div>

  <div class=" inputRadioGroup">
    <input type="checkbox" id="by-paypal">
    <label for="by-paypal">Paypal</label>
  </div>
</div>

<div class="storesList">
  <div class="store-block">
    <div class="store-name">Apple Store</div>
    <div class="rating">&bigstar; 4.5</div>
    <div class="minorder">100 €</div>
    <div class="store-payment-options">
      <div class="card-available">CARD</div>
    </div>
  </div>

  <div class="store-block">
    <div class="store-name">Nokia Store</div>
    <div class="rating">&bigstar; 3.8</div>
    <div class="minorder">250 €</div>
    <div class="store-payment-options">
      <div class="paypal-available">PAYPAL</div>
    </div>
  </div>

  <div class="store-block">
    <div class="store-name">Samsung Store</div>
    <div class="rating">&bigstar; 4.0</div>
    <div class="minorder">25 €</div>
    <div class="store-payment-options">
      <div class="card-available">CARD</div>
    </div>
  </div>

  <div class="store-block">
    <div class="store-name">Linux</div>
    <div class="rating">&bigstar; 4.9</div>
    <div class="minorder">50 €</div>
    <div class="store-payment-options">
      <div class="paypal-available">PAYPAL</div>
    </div>
  </div>
</div>

Answer 1

要获得该行为，您需要更改您拥有的代码:

1. 你需要有一个 change paypal 复选框的函数和 card
2. 然后，无论何时选中/取消选中任何复选框，您都可以循环这两个复选框以了解是否选中了其中任何一个。如果选中复选框，则显示类为 store-block 的元素我还添加了一个与 id 相同的类checkbox 的值(value)被点击。
3. 使用此类值可以轻松确定属于特定复选框的 div 集。
4. 您还需要管理所有复选框在选中后都未选中的情况，为此我使用了一个变量 oneChecked .

$(".inputRadioGroup input[type='checkbox']").change(function() {
  var oneChecked = false;
  $(".inputRadioGroup input[type='checkbox']").each(function(){
    var checked = this.checked;
    var checkedId = $(this).attr('id');
    if(checked){
      oneChecked = true;
      $('.'+checkedId).show();
    } else {
      $('.'+checkedId).hide();
    }
  });
  if(!oneChecked){
    $('.store-block').show();
  }
});

.search-area {
  margin-bottom: 10px;
}

.storesList {
  margin-top: 20px;
}

#count {
  display: inline-block;
}

.store-block {
  width: 80%;
  margin-bottom: 10px;
  padding: 5px;
  background: #e5e5e5;
  position: relative;
  overflow: hidden;
}

.rating {
  position: absolute;
  right: 70px;
  top: 3px;
}

.minorder {
  position: absolute;
  right: 180px;
  top: 3px;
}

.paypal-available,
.card-available {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 11px;
  font-weight: bold;
  color: blue;
}

.right {
  float: right;
}

.left {
  float: left;
}

.hide-me {
  display: none;
}

.checkbox-lab {
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes-area">

  <div class="inputRadioGroup">
    <input type="checkbox" id="by-card">
    <label for="by-card">Card</label>
  </div>


  <div class="inputRadioGroup">
    <input type="checkbox" id="by-paypal">
    <label for="by-paypal">Paypal</label>
  </div>


</div>


<div class="storesList">

  <div class="store-block by-card">
    <div class="store-name">Apple Store</div>
    <div class="rating">&bigstar; 4.5</div>
    <div class="minorder">100 €</div>
    <div class="store-payment-options">
      <div class="card-available">CARD</div>
    </div>
  </div>

  <div class="store-block by-paypal">
    <div class="store-name">Nokia Store</div>
    <div class="rating">&bigstar; 3.8</div>
    <div class="minorder">250 €</div>
    <div class="store-payment-options">
      <div class="paypal-available">PAYPAL</div>
    </div>
  </div>

  <div class="store-block by-card">
    <div class="store-name">Samsung Store</div>
    <div class="rating">&bigstar; 4.0</div>
    <div class="minorder">25 €</div>
    <div class="store-payment-options">
      <div class="card-available">CARD</div>
    </div>
  </div>

  <div class="store-block by-paypal">
    <div class="store-name">Linux</div>
    <div class="rating">&bigstar; 4.9</div>
    <div class="minorder">50 €</div>
    <div class="store-payment-options">
      <div class="paypal-available">PAYPAL</div>
    </div>
  </div>



</div>