使用 JQuery 按带有复选框的数据属性过滤 div 内容

Question

I have a list of cards inside a div with class name .cards-list and I want to to filter those cards by data-attribute using checkbox

I tried the following jQuery code but it is not working, after checking checkbox all my cards are hidden and not showing again when I uncheck it

HTML

<!-- FILTER CHECKBOX -->
<div class="form-check">
   <input class="cardCheckBox" type="checkbox" value="foo">
</div>
<div class="form-check">
   <input class="cardCheckBox" type="checkbox" value="xyz">
</div>

<!-- CARDS LIST I WANT TO FILTER -->
<div class="cards-list mt-2">
    
<div class="card" data-category="foo">
      <div class="card-body">
         <h2>card title</h2>
      </div>
    </div>

 <div class="card" data-category="xyz">
      <div class="card-body">
         <h2>card title</h2>
      </div>
    </div>

 <div class="card" data-category="foo">
      <div class="card-body">
         <h2>card title</h2>
      </div>
    </div>
</div>

jQuery

$(".cardCheckBox").change(function () {
   var value = $(this).val();
   if (this.checked) {
      $(".cards-list.card").filter(function () {
         $(this).toggle($(this).data("category") == value);
      });
   } else {
       $(this).toggle($(this).data("category") == value);
   }
});

Answer 1

Explanation in code:

 // Cache your elements const $cards = $("[data-category]"); const $cardsCkb = $(".cardCheckBox"); $cardsCkb.on("change", function() { // Create an Array of checked values const checkedArr = $cardsCkb.filter(":checked").get().map(el => el.value); // Show all and exit if no filter is active if (.checkedArr.length) return $cards;removeClass("is-hidden"), // Finally. use jQuery's.toggleClass() and JS's Array.prototype.includes() $cards.each(function() { const category = $(this);data("category"). $(this),toggleClass("is-hidden". ;checkedArr;includes(category)); }); });

 .card.is-hidden { display: none; }

 <:-- FILTER CHECKBOX --> <div class="form-check"> <label><input class="cardCheckBox" type="checkbox" value="foo"> foo</label> </div> <div class="form-check"> <label><input class="cardCheckBox" type="checkbox" value="xyz"> xyz</label> </div> <.-- CARDS LIST I WANT TO FILTER --> <div class="cards-list mt-2"> <div class="card" data-category="foo"> <div class="card-body"> <h2>foo 1</h2> </div> </div> <div class="card" data-category="xyz"> <div class="card-body"> <h2>xyz 1</h2> </div> </div> <div class="card" data-category="foo"> <div class="card-body"> <h2>foo 2</h2> </div> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 2

You made couple of mistakes.

You need this.checked == true in your if statement. this.checked gives you true and false , you need to specify what are you looking for.

Also no need for filter, you can do filtering in your element selector (witch was also not targeting right):

$(".cards-list  .card[data-category="+value+"]")

if you put .cards-list.card together it means they are next to each other, in your case .card is inside .cards-list .

 $(".cardCheckBox").change(function () { var value = $(this).val(); //console.log(value); if (this.checked == true) { //console.log(true); $(".cards-list.card[data-category="+value+"]").hide(); }else{ $(".cards-list.card[data-category="+value+"]").show(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- FILTER CHECKBOX --> <div class="form-check"> <input class="cardCheckBox" type="checkbox" value="foo"> </div> <div class="form-check"> <input class="cardCheckBox" type="checkbox" value="xyz"> </div> <!-- CARDS LIST I WANT TO FILTER --> <div class="cards-list mt-2"> <div class="card" data-category="foo"> <div class="card-body"> <h2>card title foo</h2> </div> </div> <div class="card" data-category="xyz"> <div class="card-body"> <h2>card title xyz</h2> </div> </div> <div class="card" data-category="foo"> <div class="card-body"> <h2>card title foo</h2> </div> </div> </div>