3

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

8

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 de marcados, mismo caso se reduce a azul.verde.
  • luego, se muestra lo que contenga ambas clases: $('div.azul.verde').show();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.