JSFiddle - React, Tailwind, and code Playground

by Chris Ames

HTML

<div class="tags">
        <h3>service</h3>
		    <label><input type="checkbox" id="type-Website" rel="Website">Website</label>
		    <label><input type="checkbox" id="type-Email" rel="Email">Email</label>
		    <label><input type="checkbox" id="type-Branding" rel="Branding">Branding</label>
        <h3>sector</h3>
		    <label><input type="checkbox" id="type-Automotive" rel="Automotive">Automotive</label>
		    <label><input type="checkbox" id="type-Property" rel="Property">Property</label>
</div>

<div class="portfolio-item" data-id="one-page-website" data-category="Automotive Email Website" style="display: block;">

				<h1 class="entry-title">One Page Website</h1>

			</div>

<div class="portfolio-item" data-id="some-logo" data-category="Branding Property" style="display: block;">

				<h1 class="entry-title">some Logo</h1>

			</div>

<div class="portfolio-item" data-id="some-email-campaign" data-category="Automotive Email" style="display: block;">

				<h1 class="entry-title">Some Email Campaign</h1>

			</div>

<div class="portfolio-item" data-id="some-brand" data-category="Automotive Branding Email" style="display: block;">

				<h1 class="entry-title">some brand</h1>

			</div>

<div class="portfolio-item" data-id="property company" data-category="Branding Email Property Website Automotive" style="display: block;">

				<h1 class="entry-title">Stationery</h1>

			</div>

JavaScript

function StringContainsAllItems(stringVal, items){
    if(items.length == 0 || items.length == null){
        return false;   
    }
    
    for(var i = 0; i < items.length; i++){
        console.log("Item: " + items[i]);
        if(stringVal.indexOf(items[i]) == -1)
        {
             return false;   
        }
    }
    
    return true;
}


$(function() { 
    var $checkboxes = $("input[id^='type-']");
    $('input[type=checkbox]:checked').attr('checked', false);
    
    $checkboxes.change(function() {
        if( $('input[type=checkbox]:checked').length > 0){
            
            var selectorArray = [];
            
            $checkboxes.filter(':checked').each(function() {
                selectorArray.push($(this).attr('rel'));
                console.log($(this).attr('rel'));             
            });
                      
            $('[data-category]').hide() // hide all rows
             .filter(function() {
                 return StringContainsAllItems($(this).data('category'), selectorArray);             
            }).show(); // reduce set to matched and show
       
        }else
            {
             $('[data-category]').show();   
            }
    });    
});