如何使用单选按钮过滤jQuery中的元素

Question

I need to write script for filtering elements. I have form with radio buttons and grid of elements. The idea is to show specific elements when i start checking so: For examlpe i check PAPER and i see all paper items when i add ROUND i see "paper WITH round shape" and when add SIZE XL so it show me only item which has all these categories "PAPER, ROUND, XL, when there is no results only sorry will be visible.

How i should start with it?? any clues?

I want to use jQuery for this.

Here is link to project: http://codepen.io/ponciusz/pen/NGpXPB

 <div class="container"> <form> <span class="sub-head">material:</span> <input id="mat-paper" type="radio" name="material" value="paper"> <label for="mat-paper">paper</label> <input id="mat-plastic" type="radio" name="material" value="plastic"> <label for="mat-plastic">plastic</label><br/> <span class="sub-head">shape:</span> <input id="shape-round" type="radio" name="shape" value="round"> <label for="shape-round">round</label> <input id="shape-squere" type="radio" name="shape" value="squere"> <label for="shape-squere">squere</label> <br/> <span class="sub-head">size:</span> <input type="radio" name="size" value="S"> <label for="size-s">S</label> <input type="radio" name="size" value="L"> <label for="size-l">L</label> <input type="radio" name="size" value="M"> <label for="size-m">M</label> <input type="radio" name="size" value="XL"> <label for="size-xl">XL</label><br><br> <input type="reset" value="Reset!"><br><br> </form> <p>TEST QUERIES:</p> <p>"paper, round, xl" should show only: PRODUCT 6</p> <p>"plastic, round, xl" should show: PRODUCT 2,3,5 </p> <div data-categories='["paper", "plastic", "round", "squere", "s"]' class="item">PRODUCT 1</div> <div data-categories='["plastic", "round", "squere", "s", "m","l","xl"]' class="item">PRODUCT 2</div> <div data-categories='["plastic", "round", "squere", "l","xl"]' class="item">PRODUCT 3</div> <div data-categories='["paper", "round", "s"]' class="item">PRODUCT 4</div> <div data-categories='["plastic", "round", "xl"]' class="item">PRODUCT 5</div> <div data-categories='["paper", "round", "xl"]' class="item">PRODUCT 6</div> <div class="item sorry">SORRY</div> </div> 

Answer 1

Add this code to your JS part of your code pen (don't forget to include jQuery in your codepen or it wont work.

  $(function(){
      var items = $("[data-categories]");
      //get all the elements that has data-categories attribute
      items.hide(); //hide all of the elements we found above
      $("input[type=radio]").on("change",function(ev){ //bind onchange event
        var selectedValues = []; //this array will hold all of our current categories
        $("input:checked").each(function(idx, checkedRadio){//get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
          selectedValues.push($(checkedRadio).val().toLowerCase());
        });
        items.each(function(idx, item){//go over all of the items with data-categories
          $item = $(item); //wrap the element with jQuery
//the bShouldElementShow will only be true if the element has all of the categories that we added to selectedValues as the every function returns true if all of the elements pass the predict and false if even one doesn't pass.
          var bShouldElementShow = selectedValues.every(function(el){
            return $item.data("categories").indexOf(el) != -1;
          });

          //if all of categories appear for this element then show it, else hide it.
          if(bShouldElementShow){
            $item.show();
          }
          else{
            $item.hide();
          }
        })
      });
    });