Tengo un conjunto de `div` que puedo mostrar u ocultar mediante el uso de `checkboxes`. Estoy usando jQuery para encontrar los `div` con una cierta clase de CSS, y sólo mostrar ellos.

El html es el siguiente:

    <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>

Javascript/jQuery

    $('input').click(function() {
      $('.tags').hide();
      $('input:checked').each(function(i) {
        $('div.' + $(this).val()).show();
      });
    });

El problema que tengo es que si selecciono tanto el azul y el verde, en lugar de sólo de un `div`, muestra los tres, ya que todos los `div` tienen la clase CSS azul o verde. 

Lo que quiero hacer es editar el código para que cuando selecciono más de un `checkbox` solo muestra los `div` que tienen ambas clases CSS.

[JsFiddle][1] 


  [1]: https://jsfiddle.net/CalvT/0cv52xa6/1/