<style>
    /* Snel wat markup, niet interessant. */
    div > div { width: 100px;height: 100px;text-align: center;float: left;background-color: #c0c0c0; margin: 10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    function applyFilter(){
        /* Variabelen */
        var $categorieRijen, $teTonenCategorie;


        /* Alle rijen ophalen */
        $categorieRijen = $('.container > div');


        /* Welke categorie willen we tonen? Deze in de variabele $teTonenCategorie zetten */
        $teTonenCategorie = $('select[name="filter"]').val();


        /* Eerst alles op zichtbaar zetten */
        $categorieRijen.show();


        /* Wanneer de reset wordt aangereoepen, niets verbergen en alles zichtbaar laten.*/
        if($teTonenCategorie !== "reset") {
            /* Anders alle categorieen verbergen die niet de class hebben die voldoet aan het filter dat geselecteerd is in de dropdown */
            $categorieRijen.not('.' + $teTonenCategorie ).hide();
        }
    }
</script>


<select name="filter" onchange="applyFilter()">
    <option value="reset">reset</option>
    <option value="een">Een</option>
    <option value="twee">Twee</option>
    <option value="drie">Drie</option>
</select>


<div class="container">
    <div class="een"> Een </div>
    <div class="een"> Een </div>
    <div class="twee"> Twee </div>
    <div class="twee"> Twee </div>
    <div class="drie"> drie </div>
    <div class="een"> Een </div>
    <div class="drie"> drie </div>
    <div class="twee een"> een en twee </div>
</div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
    	div > div { width: 100px;height: 100px;text-align: center;float: left;background-color: #c0c0c0; margin: 10px;}
	</style>
</head>
<body>
<div class="filterOpties">
	<label for="een">Een</label>
	<input id="een" class="filterOptie" type="checkbox" checked name="filterOptie" onchange="applyFilter(this)" value="een" />
	<label for="Twee">Twee</label>
	<input id="twee" class="filterOptie" type="checkbox" checked name="filterOptie" onchange="applyFilter(this)" value="twee" />
	<label for="Drie">Drie</label>
	<input id="drie" class="filterOptie" type="checkbox" checked name="filterOptie" onchange="applyFilter(this)" value="drie" />
</div>


<div class="container">
	<div class="opmaak class een"> Een </div>
	<div class="een"> Een </div>
	<div class="twee"> Twee </div>
	<div class="twee"> Twee </div>
	<div class="drie"> drie </div>
	<div class="een"> Een </div>
	<div class="drie"> drie </div>
	<div class="twee een">een en twee</div>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
	var $filterOpties;


	$filterOpties = $('.filterOpties > input[type="checkbox"][name="filterOptie"]').map(function(){
    	return this.value;
	});


	var $hiddenCategories = [];


	function applyFilter(element){


    	var $allElements, $isChecked;


    	$allElements = $('.container > div ');
    	$isChecked   =  $.inArray(element.value, $hiddenCategories);


    	if( $isChecked === -1  && element.checked === false) {
        	$hiddenCategories.push( element.value );
    	} else if  ( $isChecked !== -1 && element.checked === true ) {
        	$hiddenCategories.splice($isChecked, 1);
    	}


    	$.each($allElements, function (i, el){
        	var $shouldHide;


        	$shouldHide = $(el).map(function(){


            	var filterMatches, aantalFilterOpties, context;


            	context = this;
            	filterMatches = aantalFilterOpties = 0;


            	$.each($filterOpties, function(x, filterOptie){
                	if( context.className.contains(filterOptie) ){
                    	aantalFilterOpties ++;
                	}
                	if ( context.className.contains(filterOptie) && $.inArray(filterOptie, $hiddenCategories ) !== -1 ) {
                    	filterMatches++;
                	}
            	});


            	return { hide: (aantalFilterOpties !== filterMatches),  element: i};
        	});


        	$.each($shouldHide, function(toHide, divElement){
            	$($allElements[divElement.element]).toggle(divElement.hide);
        	});


    	});
	}
</script>
</body>
</html>