checkbox Filter

by Amir Sharifian

HTML

<ul class="drop-down" id="CategoryType">
  <li>
    <label class="filter-label" for="categoryMain-1">
      <input class="filter-checkbox" type="checkbox" id="categoryMain-1" data-ty-value="1">
      <span class="">1</span>
    </label>
  </li>
  <li>
    <label class="filter-label" for="categoryMain-2">
      <input class="filter-checkbox" type="checkbox" id="categoryMain-2" data-ty-value="2">
      <span class="">2</span>
    </label>
  </li>
  <li>
    <label class="filter-label" for="categoryMain-3">
      <input class="filter-checkbox" type="checkbox" id="categoryMain-3" data-ty-value="3">
      <span class="">3</span>
    </label>
  </li>
  <li>
    <label class="filter-label" for="categoryMain-4">
      <input class="filter-checkbox" type="checkbox" id="categoryMain-4" data-ty-value="4">
      <span class="">4</span>
    </label>
  </li>
  <li>
    <label class="filter-label" for="categoryMain-5">
      <input class="filter-checkbox" type="checkbox" id="categoryMain-5" data-ty-value="5">
      <span class="">5</span>
    </label>
  </li>
</ul>
<p>-------------------------------------------------</p>
<div class="product-box" pc="1" g="male">product-1</div>
<div class="product-box" pc="2" g="female">product-2</div>
<div class="product-box" pc="1" g="male">product-1</div>
<div class="product-box" pc="3" g="female">product-3</div>
<div class="product-box" pc="2" g="male,female">product-2</div>
<div class="product-box" pc="4" g="male">product-4</div>
<div class="product-box" pc="4" g="female">product-4</div>
<div class="product-box" pc="5" g="male">product-5</div>

JavaScript

$("input.filter-checkbox").change(function(){
    var categories = [],gender = [],brands = [];
    
    //push to array if checked and remove from array if unchecked
    $('input.filter-checkbox:checked').map(function() {
        var checkbox_id = $(this).attr("id");
        var val = $(this).data("ty-value");
        
        //push to categories array if checkbox is category filter
        if(checkbox_id.indexOf("categoryMain") >= 0){ categories.push(val); }
        
        //push to gender array if checkbox is gender filter
        if(checkbox_id.indexOf("genderMain") >= 0){ gender.push(val); }
        
        //push to brands array if checkbox is brands filter
        if(checkbox_id.indexOf("brandMain") >= 0){ brands.push(val); }
    }).get();
    
    if(categories.length > 0 || gender.length > 0){
    var show = {
        'pc': categories
    };
    console.log(show);
    $("div.product-box").hide().filter(function(){
        // Only returns true for elements
        // that satisfy all three arrays
        for (var i in show) {
            var attr = $(this).attr(i),
                match = ('|' + show[i].join('|') + '|').indexOf(attr) > -1;
            if (!match) {
                return false;
            }
        }
        // If we reach this point then we can assert
        // that the element contains all required attributes
        return true;
    })
    .show();
    }else{
    	$("div.product-box").show();
    }
});