JSFiddle - React, Tailwind, and code Playground

Product filtering on multiple HTML5 data attributes, using JQuery lib.

by Jan Klemmensen

HTML

<div style="float:left; width:20%; position:relative;">
<p class="margin_bottom_5"><b>Screensizes:</b></p>
<input type="checkbox" name="screen_group[]" value="18.4" id="18.4" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">18,4"</span><br />

<input type="checkbox" name="screen_group[]" value="17.3" id="17.3" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">17,3"</span><br />
    
<input type="checkbox" name="screen_group[]" value="15.6" id="15.6" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">15,6"</span><br />
    
<input type="checkbox" name="screen_group[]" value="15.5" id="15.5" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">15,5"</span><br />
    
<input type="checkbox" name="screen_group[]" value="15.4" id="15.4" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">15,4"</span><br />
    
<input type="checkbox" name="screen_group[]" value="14" id="14" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">14"</span><br />
<input type="checkbox" name="screen_group[]" value="13.3" id="13.3" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">13,3"</span><br />
    
<input type="checkbox" name="screen_group[]" value="12.5" id="12.5" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">12,5"</span><br />
    
<input type="checkbox" name="screen_group[]" value="11.6" id="11.6" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">11,6"</span><br />
    
<input type="checkbox" name="screen_group[]" value="11" id="11" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">11"</span><br />
    
<input type="checkbox" name="screen_group[]" value="10.1" id="10.1" onClick="filterFunction()" />&nbsp;<span class="filter_paragraphs">10,1"</span><br />
</div>

<div style="float:left; width:25%; position:relative;">
<p class="margin_bottom_5"><b>Brands:</b></p>
<input type="checkbox" name="brand_group[]"...

CSS

.produkt_gruppe_div { 
	float:left; 
	width:16.9%;
	padding:1%; 
	margin-bottom:20px;
	background:#999; 
	border-top:2px solid #EEE; 
	margin-right:1.1%;
	position:relative;
    color:#FFF;
	z-index:10 !important;
	-webkit-transition: all 0.5s ease-out;
  	-moz-transition: all 0.5s ease-out;
  	-o-transition: all 0.5s ease-out;
  	transition: all 0.5s ease-out;
}

JavaScript

function filterFunction()
{
//if( $( "input[name='screen_group[]']:checked" ).length > 0 ) 
if( $( "input[type='checkbox']:checked" ).length > 0 ) 
{
$( '.produkt_gruppe_div' ).hide();

searchScreens = $( "input[name='screen_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); 
searchBrands = $( "input[name='brand_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); 

// Combine arrays with marked checkbox values
var params 		= searchScreens.concat( searchBrands );
//console.log('Params: '+params);
		
// Possible data attributtes
filterAttributtes = $( '.product_gruppe_div:first' ).data();
		
var searchValues = [];
// Loop marked check boxes, and display product divs which contains these values
$.each( params, function( key, value )
{
	$('[data-screensize="' + value + '"]').show();
	$('[data-brand_name="' + value + '"]').show();			

// $( '.produkt_gruppe_div' ).filter('[data="' + value + '"]').show();
// $( '.produkt_gruppe_div' ).filter('[data-screensize="' + value + '"]').addClass('screen').fadeIn(300);
            
// Align produkt_gruppe_div efter indlæsning
	alignFilteredProducts();	
});	
} 
else 
{
	// Vis alle, hvis der ikke er afmærket noget
	$('.produkt_gruppe_div').show();
}	
}