jqueryで隠されたコンテンツを表示する際の問題

Question

lynda.com（jqueryについて）からプログラミングの課題を行っていました。 チェックボックスをオンにして、スポーツ/ヘルス製品のチェックを外したときに商品を表示しないようにし、再度チェックしたときにリストに表示するようにしました。私はチェックボックスのチェックを外すと非表示にすることができますが、もう一度チェックすると再び表示されません。ここで は（私は偉大ではないインデントに謝罪）最初のjQueryのコードです：

$("document").ready(function() { 
 
     var combo = $("input[name=vitamin]").add("input[name=proteinbar]").add("input[name=mineralwater]"); 
 
     combo.on("change", function() { 
 
     var name = $(this).attr("name"); 
 
     if (!$(this).checked) { 
 
      filterList(name, $(this)); 
 
     } 
 
     if ($(this).checked) { 
 
      unfilterList(name, $(this)); 
 
     } 
 
     }); 
 
    }); 
 

 
    function filterList(name, selector) { 
 
     $(".product-item").each(function(index) { 
 
     if (($(this).children("h2").data("type") == name) && !selector.checked) { 
 
      $(this).hide(); 
 
     } 
 
     }); 
 
    } 
 

 
    function unfilterList(name, selector) { 
 
     $(".product-item").each(function(index) { 
 
     if (($(this).children("h2").data("type") == name)) { 
 
      $(this).show(); 
 
     } 
 
     }); 
 
     return false; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form > 
 
      show:</br> 
 
      <input type="checkbox" checked value="mineralWater" name="mineralwater" />Mineral Water <br> 
 
      <input type="checkbox" value="proteinbar" name="proteinbar" checked /> protein bars 
 
      <input type="checkbox" checked value="Vitamins" name="vitamin" /> vitamins <br> 
 
     </form> 
 
     <ul class="product-list"> 
 
     <li class="product-item" data-prod_id="V-A1037"> 
 
      <img class="product-image" src="images/products/vitamin-a.jpg" alt="Vitamin A - Product Photo"> 
 
      <h2 class="product-name" data-type="vitamin">Vitamin A</h2> 
 
     </li> 
 
     <li class="product-item" data-prod_id="V-BC2178"> 
 
      <img class="product-image" src="images/products/vitamin-bcomplex.jpg" alt="B Complex - Product Photo"> 
 
      <h2 class="product-name" data-type="vitamin">Vitamin-B Complex</h2> 
 
     </li> 
 
     <li class="product-item" data-prod_id="MW-8812"> 
 
      <img class="product-image" src="images/products/mineralwater-blueberry.jpg" alt="Blueberry Mineral Water - Product Photo"> 
 
      <h2 class="product-name" data-type="mineralwater">Blueberry Mineral Water</h2> 
 
     </li>

Answer 1

あなたはthis.checkedまたは$(this).prop('checked')に$(this).checkedを変更する必要があり、私は思います。