Skip to main content
se eliminaron 3 caracteres en el cuerpo
Origen Enlace
CalvT
  • 301
  • 1
  • 5
  • 16

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.

JsFiddle

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

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

se añadieron 16 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

Tengo un conjunto de divsdiv 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: https://jsfiddle.net/CalvT/0cv52xa6/1/JsFiddle

Tengo un conjunto de divs 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: https://jsfiddle.net/CalvT/0cv52xa6/1/

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

Esconder div si no tiene clases multiplosmultiples

Tengo un conjunto de divs que puedo mostrar u ocultar mediante el uso de checkboxes. Estoy usando jQuery para encontrar los divs con una cierta clase de CSS, y solosó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 solosó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 masmás de un checkbox solo muestra los divs que tienen ambosambas clases CSS.

JSFiddle: https://jsfiddle.net/CalvT/0cv52xa6/1/

Esconder div si no tiene clases multiplos

Tengo un conjunto de divs que puedo mostrar u ocultar mediante el uso de checkboxes. Estoy usando jQuery para encontrar los divs con una cierta clase de CSS, y solo 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 solo 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 mas de un checkbox solo muestra los divs que tienen ambos clases CSS.

JSFiddle: https://jsfiddle.net/CalvT/0cv52xa6/1/

Esconder div si no tiene clases multiples

Tengo un conjunto de divs 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: https://jsfiddle.net/CalvT/0cv52xa6/1/

Origen Enlace
CalvT
  • 301
  • 1
  • 5
  • 16
Loading