I have a product list. when user selects the checkbox, page displays list of items in selected category only.remaining products will hide

Question

<div id="productControls">
    <form>
      <div>
        <span>Show:</span>
        <input  id="vitamins" type="checkbox" checked="checked" />
        <label for="vitamins">Vitamins</label>
        <input  id="proteinB" type="checkbox" checked="checked" />
        <label for="proteinB">ProteinBars</label>
      </div>
    </form>

  </div>
  <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="PB-8154">
        <img class="product-image" src="images/products/proteinbar-chocolate.jpg" alt="Protein Bar Chocolate - Product Photo">
        <h2 class="product-name" data-type="proteinbar">Chocolate Protein Bar</h2>
    </li>
    <li class="product-item" data-prod_id="V-MV7763">
        <img class="product-image" src="images/products/vitamin-multi.jpg" alt="Vitamin Multivitamin - Product Photo">
        <h2 class="product-name" data-type="vitamin">Multi-vitamin</h2>
    </li>
    <li class="product-item" data-prod_id="PB-1234">
        <img class="product-image" src="images/products/proteinbar-peanutbutter.jpg" alt="Vitamin Protein Bar Peanut Butter - Product Photo">
        <h2 class="product-name" data-type="proteinbar">Peanut Butter Protein Bar</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><!-- product-list -->

<script>

        document.querySelector('#Vitamins').addEventListener('change',function (evt) {
                        updateView();
                    });
                    document.querySelector('#ProteinB').addEventListener('change',function (evt) {
                        updateView();
                    });
       function updateView(){
         //how to approach//

        }
</script>

what goes inside the function 'updateView'. what are the different approaches to this problem. if user selects vitamins checkbox- page should display all vitamin products and products of proteins shouldn't display and vice-versa. TIA.

Answer 1

tested work:

 document.querySelector('#vitamin').addEventListener('change', function(evt) { updateView(evt, this); }, false); document.querySelector('#proteinbar').addEventListener('change', function(evt) { updateView(evt, this); }, false); var productList = document.getElementsByClassName('product-list')[0]; var productName = productList.getElementsByClassName('product-name'); function updateView(e, self) { self.checked ? showOrHidden('block', self) : showOrHidden('none', self); } function showOrHidden(choice, thisArgu) { Array.from(productName).forEach(function(ele) { thisArgu.id === ele.getAttribute('data-type') ? ele.parentNode.style.display = choice : true; }); } 

 <div id="productControls"> <form> <div> <span>Show:</span> <input id="vitamin" type="checkbox" checked="checked" /> <label for="vitamin">Vitamins</label> <input id="proteinbar" type="checkbox" checked="checked" /> <label for="proteinbar">ProteinBars</label> </div> </form> </div> <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="PB-8154"> <img class="product-image" src="images/products/proteinbar-chocolate.jpg" alt="Protein Bar Chocolate - Product Photo"> <h2 class="product-name" data-type="proteinbar">Chocolate Protein Bar</h2> </li> <li class="product-item" data-prod_id="V-MV7763"> <img class="product-image" src="images/products/vitamin-multi.jpg" alt="Vitamin Multivitamin - Product Photo"> <h2 class="product-name" data-type="vitamin">Multi-vitamin</h2> </li> <li class="product-item" data-prod_id="PB-1234"> <img class="product-image" src="images/products/proteinbar-peanutbutter.jpg" alt="Vitamin Protein Bar Peanut Butter - Product Photo"> <h2 class="product-name" data-type="proteinbar">Peanut Butter Protein Bar</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>