filtering result more than 1 checkboxes

Question

I have a list of rows and i want them to show based on more then 1 results i mean check boxes value It is working when i place only 1 data tag but not working when i place multiple data tags I have pasted using code snipet so you would be able to know how it is to be worked out I have also tried by using only 3 checkboxes of size only and placed different size like data-tag="XL" second list data-tag="L" and it is working in this way but not working with miltiple

$(document).ready(function(){
  $('.size').on('change', function(){
    var category_list = [];
    $('#filters :input:checked').each(function(){
      var category = $(this).val();
      category_list.push(category);
    });

    if(category_list.length == 0)
      $('.resultblock').fadeIn();
    else {
      $('.resultblock').each(function(){
        var item = $(this).attr('data-tag');
        if(jQuery.inArray(item,category_list) > -1)
          $(this).fadeIn('slow');
        else
          $(this).hide();
      });
    }   
  });
}); 

$(document).ready(function(){
  $('.color').on('change', function(){
    var category_list = [];
    $('#filters :input:checked').each(function(){
      var category = $(this).val();
      category_list.push(category);
    });

    if(category_list.length == 0)
      $('.resultblock').fadeIn();
    else {
      $('.resultblock').each(function(){
        var item = $(this).attr('data-tag');
        if(jQuery.inArray(item,category_list) > -1)
          $(this).fadeIn('slow');
        else
          $(this).hide();
      });
    }   
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="size-box" id="filters">
                	<h5>size</h5>
                    <ul>
                    	<li> <input type="checkbox" name="XL" value="XL" id="XL" class="size"> <span class="check-txt">XL </span></li>
                        <li> <input type="checkbox" name="M" value="M" id="M" class="size"> <span class="check-txt">M </span></li>
                        <li> <input type="checkbox" name="L" value="L" id="L" class="size"> <span class="check-txt">L </span></li>
                    </ul>
                </div>
                
                <div class="color-box" id="filters">
                	<h5>color</h5>
                    <ul>
                    	<li> <input type="checkbox" name="White" value="White" id="White" class="color"> <span class="check-txt">White</span></li>
                        <li> <input type="checkbox" name="Black" value="Black" id="Black" class="color"> <span class="check-txt">Black</span></li>
                        <li> <input type="checkbox" name="Orange" value="Orange" id="Orange" class="color"> <span class="check-txt">Orange</span></li>
                        <li> <input type="checkbox" name="Blue" value="Blue" id="Blue" class="color"> <span class="check-txt">Blue</span></li>
                      
                    </ul>
                </div>

<ul>
  <li class="resultblock" data-tag='S L Orange Black'></li>
  <li class="resultblock" data-tag='S XL L Orange Black Blue'></li>
  <li class="resultblock" data-tag='XL L Black White Blue'></li>
  <li class="resultblock" data-tag='S XL L White Orange Black'></li>
  <li class="resultblock" data-tag='S L Blue Black'></li>
  <li class="resultblock" data-tag='S White Black'></li>
  <li class="resultblock" data-tag='S L XL Orange Black'></li>
</ul>

Answer 1

Try something like this:

$('input').on('change', function () {
  var $checked = $('input:checked');
  if ($checked.length) {
    $('.resultblock').hide();
    $checked.each(function () {
      var val = $(this).val();
      $('.resultblock').filter('[data-tag*="' + val + '"]').show();
    });
  } else {
    $('.resultblock').show();
  }
});

jsFidle: https://jsfiddle.net/undaetpt/