当使用jquery甚至纯JavaScript选中3个或更多复选框时，如何过滤div列表？

Question

基于我之前的question，我想基于特定div元素的存在，通过不同组合过滤div列表。

在下面的示例中，我使用3个复选框“卡”，“贝宝”，“仅显示开放式商店”来过滤列表。现在，它适用于“卡”和“ Paypal”复选框，但是如果您还尝试选中“仅显示开放商店”复选框，则会使其混乱。我该如何解决？

代码如下：

var checkboxArea = document.querySelector('.filter-area')
var storeBlocks = Array.from(document.querySelectorAll('.store-block'))
var byCard = document.getElementById('by-card')
var byPaypal = document.getElementById('by-paypal')
var byOpen = document.getElementById('by-open')

var cardBlocks = storeBlocks.filter(function(block) {
  return block.querySelector('.card-available')
})

var payPalBlocks = storeBlocks.filter(function(block) {
  return block.querySelector('.paypal-available')
})

var openStoreBlocks = storeBlocks.filter(function(block) {
  return block.querySelector('.close-small-tag')
})

checkboxArea.addEventListener('change', function(e) {
  switch (true) {
    case byCard.checked && byPaypal.checked:
      storeBlocks.forEach(function(block) {
        block.classList.remove('hide-me')
      })
      break
    case byCard.checked:
      cardBlocks.forEach(function(block) {
        block.classList.remove('hide-me')
      })
      payPalBlocks.forEach(function(block) {
        block.classList.add('hide-me')
      })
      break
    case byPaypal.checked:
      cardBlocks.forEach(function(block) {
        block.classList.add('hide-me')
      })
      payPalBlocks.forEach(function(block) {
        block.classList.remove('hide-me')
      })
      break

    case byOpen.checked:
      openStoreBlocks.forEach(function(block) {
        block.classList.toggle('hide-me')
      })
      break



    default:
      payPalBlocks.concat(cardBlocks).forEach(function(block) {
        block.classList.remove('hide-me')
      })
  }
})

.close-small-tag,
.open-small-tag {
  position: absolute;
  left: 130px;
  top: 5px;
  font-size: 11px;
  font-weight: bold;
  color: brown;
}

.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;
}

.filter-area {
  margin-bottom: 20px;
  overflow: hidden;
}

.inputRadioGroup {
  float: left;
  margin-right: 20px;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
}

<div class="filter-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 class=" inputRadioGroup">
    <input type="checkbox" id="by-open">
    <label for="by-open">SHOW ONLY OPEN STORES</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="open-small-tag">OPEN</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="open-small-tag">OPEN</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="close-small-tag">CLOSE</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 Store</div>
    <div class="rating">&bigstar; 4.9</div>
    <div class="close-small-tag">CLOSE</div>
    <div class="minorder">50 €</div>
    <div class="store-payment-options">
      <div class="paypal-available">PAYPAL</div>
    </div>
  </div>



</div>