Skip to main content
se añadieron 401 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

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();

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>

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();
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

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>