Utilizando map y join puedes resolver el problema fácilmente.
$('input').click(function() {
$('.tags').hide();
var marcados = $('input:checked').map(function() {
return $( this ).val();
}).get();
$('div.' + marcados.join('.')).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputs">
<input class="filterbox" type="checkbox" value="azul" />Azul
<input class="filterbox" type="checkbox" value="verde" />Verde
<input class="filterbox" type="checkbox" value="rojo" />Rojo
</div>
<br>
<div class="tags azul">Azul</div>
<div class="tags verde azul">Verde y Azul</div>
<div class="tags verde rojo">Verde y Rojo</div>
Explicación:
$('input:checked').map
crea un array en base al valor retornado en la funcion, en el caso que planteas, como usamos$( this ).val()
, retorna['azul','verde']
.marcados.join('.')
construye una cadena, separadas por puntos con los elementos demarcados
, mismo caso se reduce aazul.verde
.- luego, se muestra lo que contenga ambas clases:
$('div.azul.verde').show();