JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<div class="filtering-wrap">             
                <p style="font-size:12px;"><strong>Filter 1</strong></p>
                <form>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-1" value="check1" id="check1" /> Check1</label><br>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-1" value="check2" id="check2" /> Check2</label><br> 
                    <label style="font-size:12px;"><input type="checkbox" name="fl-1" value="check3" id="check3" /> Check3</label><br>                     
                  
                </form>
                <p style="font-size:12px;"><strong>Filter 2</strong></p>
                <form>
                	<label style="font-size:12px;"><input type="checkbox" name="fl-2" value="check4" id="check4" /> Check4</label><br>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-2" value="check5" id="check5" /> Check5</label><br>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-2" value="check6" id="check6" /> Check6</label><br>                  
                    <label style="font-size:12px;"><input type="checkbox" name="fl-2" value="check7" id="check7" /> Check7</label><br>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-2" value="check8" id="check8" /> Check8</label><br>
					<label style="font-size:12px;"><input type="checkbox" name="fl-2" value="check9" id="check9" /> Check9</label>
                </form>                
                    
				<p style="font-size:12px;"><strong>Filter 3</strong></p>
                <form>
                	<label style="font-size:12px;"><input type="checkbox" name="fl-3" value="check10" id="check10" /> Check10</label><br>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-3" value="check11" id="check11" /> Check11</label><br>
                    <label style="font-size:12px;"><input...

CSS

body { font-family:'Arial'; color:#646464; }		
	.filtering-wrap { float:left; width:20%; margin:0 5% 0 0; padding:0; position:relative; }

JavaScript

$(document).ready(function() {
    var $results=$('.result').text(function(){
        /* swap text with catgories to see results better */
        return $(this).data('category')
    })
    var $checks=$(':checkbox[name^=fl]').change(function(){
        var $checked=$checks.filter(':checked');
        /* show all when nothing checked*/
        if(!$checked.length){
            $results.show();
            return;
        }
        /* create array of checked values */
        var checkedVals= $.map($checked, function(el){
            return el.value
        });
        /* hide all results, then filter for matches */
        $results.hide().filter(function(){
            var cats=$(this).data('category').split(' ');
            var checkMatches=$.grep(checkedVals, function(val){                
                return $.inArray(val, cats) >-1;
            });            
            return checkMatches.length === checkedVals.length;
         /* show resultas that match all checkboxes */            
        }).show();
        
        
    });

});