Skip to main content
3 de 4
se añadieron 16 caracteres en el cuerpo
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

Esconder div si no tiene clases multiples

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

JsFiddle

CalvT
  • 301
  • 1
  • 5
  • 16