Tengo un conjunto de div
que puedo mostrar u ocultar mediante el uso de checkboxes
. Estoy usando jQuery para encontrar los divsdiv
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 divsdiv
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 divsdiv
que tienen ambas clases CSS.