Working with Checkbox - Hide Show the content with data-type attribute from the checkbox

checkbox.html

<!-- Checboxes -->
<form id="productCategories">
  <input type="checkbox" name="product[]" value="vitamin" checked>Vitamin<br>
  <input type="checkbox" name="product[]" value="mineralwater" checked>Mineral Water<br>
  <input type="checkbox" name="product[]" value="proteinbar" checked>Proteinbar
</form>

<!-- List Items -->
<ul class="product-list">
  <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>
  <li class="product-item" data-prod_id="PB-1919">
    <img class="product-image" src="images/products/proteinbar-lemon.jpg" alt="Protein Bar Lemon - Product Photo">
    <h2 class="product-name" data-type="proteinbar">Lemon Protein Bar</h2>
  </li>
</ul>

<!-- Script -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
    $(document).ready(function(){
        // Change background colors of the category name display
        $("h2[class=product-name][data-type=mineralwater]").css("background-color", "green");
        
        // Show hide the prroduct listing by the categories
        //if ticked then show otherwise hide
        var productCat = $("form#productCategories input[type=checkbox]");
        
        $(productCat).on('change', function(){
            if($(this).is(":checked")) {
                updateProductView($(this).val(), 'block');
            }else if($(this).is(":not(:checked)")){
                updateProductView($(this).val(), 'none');
            }
        });
        
        function updateProductView(category, view){
            dataSelector =  "";
            switch(category){
            case "mineralwater":
                dataSelector =  "h2[data-type='mineralwater']";
                break;
            case "proteinbar":
                dataSelector =  "h2[data-type='proteinbar']";
                break;
            case "vitamin":
                dataSelector =  "h2[data-type='vitamin']";
                break;
            }
            
            $('.product-item').has(dataSelector).css('display', view);
        }
        
    });
</script>