Filtrando con casillas de verificación usando jQuery

Question

Quiero filtrar algo de contenido usando casillas de verificación.

He logrado hacerlo gracias a un earlier post que simplifiqué un poco aquí DEMO.

Mi problema es que cada elemento de contenido puede tener más de una categoría adjunta.Cuando selecciono la categoría A y la categoría B y luego anulo la selección de la categoría B, se eliminan los elementos de contenido que tienen ambas categorías adjuntas.

El proyecto en el que estoy trabajando contendrá más de dos categorías. Un elemento de contenido puede tener muchas categorías unidas

HTML:

<ul id="filters"> 
    <li> 
     <input type="checkbox" value="categorya" id="filter-categorya" /> 
     <label for="filter-categorya">Category A</label> 
    </li> 
    <li> 
     <input type="checkbox" value="categoryb" id="filter-categoryb" /> 
     <label for="filter-categoryb">Category B</label> 
    </li> 
</ul> 

<div class="categorya categoryb">A, B</div> 
<div class="categorya">A</div> 
<div class="categorya">A</div> 
<div class="categorya">A</div> 
<div class="categoryb">B</div> 
<div class="categoryb">B</div> 
<div class="categoryb">B</div> 

Javascript:

$('input').click(function() { 
    var category = $(this).val(); 

    if (!$(this).attr('checked')) $('.' + category).hide(); 
    else $('.' + category).show(); 

}); 

Answer 1

creo que los dos enfoques más sencilla sería al hacer clic con cualquiera de las casillas de verificación de filtro o bien:

1. Ocultar todos<div> elementos, a continuación, recorrer las casillas de verificación y para cada comprueban uno .show() la <div> elementos con la categoría asociada.

2. Loop a través de todas las casillas de hacer una lista de las clases que se muestra, a continuación, recorrer los <div> elementos, comprobando cada uno para ver si tiene una de esas clases y .hide() o .show() según sea apropiado.

¿Hay algún selector general que pueda usar para obtener todos los elementos <div>? ¿Tienen un elemento de contenedor particular, como que todas las casillas de verificación son descendientes de "#filters"?

// Solution 1 

$("#filters :checkbox").click(function() { 
    $("div").hide(); 
    $("#filters :checkbox:checked").each(function() { 
     $("." + $(this).val()).show(); 
    }); 
}); 

Demostración: http://jsfiddle.net/6wYzw/41/

// Solution 2 

$("#filters :checkbox").click(function() { 

    var re = new RegExp($("#filters :checkbox:checked").map(function() { 
          return this.value; 
         }).get().join("|")); 
    $("div").each(function() { 
     var $this = $(this); 
     $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"](); 
    }); 
}); 

Demostración: http://jsfiddle.net/6wYzw/42/

supongo que la primera manera es más corto y más fácil de mantener ...

Answer 2

http://jsfiddle.net/FfZsC/

$('input').click(function() { 
    var category = $(this).val(); 

    $('.' + category).each(function() { 
     var anyChecked = false; 
     var classArray = this.className.split(/\s+/); 

     for(idx in classArray) 
     { 
      if ($('#filter-' + classArray[idx]).is(":checked")) 
      { 
       anyChecked = true; 
       break; 
      } 
     } 

     if (! anyChecked) $(this).hide(); 
     else $(this).show(); 

    }); 

}); 

Básicamente, puedo comprobar cada categoría casilla de verificación asociada con esos artículos relacionado con el filtro actualmente cliqueado . Si alguno de ellos todavía está marcado, entonces se muestra el artículo; de lo contrario, está oculto.

Answer 3

Al hacer clic en una casilla de construcción un selector como este:

var selector = $('input:checkbox').map(function(){ 
    return this.checked ? '.' + this.id : ''; 
}).get().join(''); 

Esto generará un selector como categoryb.categoryc (un selector de css AND). A continuación, puede ocultarlo todo y mostrar los que coinciden con el selector.

$('div[class^="category"]') 
    .hide() 
    .filter(selector) 
    .show(); 

Pruébelo en jsbin

Código de Trabajo:

$('input').click(function() { 
    var selector = $('input:checkbox').map(function(){ 
     return this.checked ? '.' + this.id : ''; 
    }).get().join(''); 
    console.log(selector); 

    var all = $('div[class^="category"]'); 
    if(selector.length) 
     all.hide().filter(selector).show() 
    else all.show(); 
}); 

Answer 4

que quería añadir animación jQuery para mostrar y ocultar. Las soluciones anteriores no permitían esto (primero ocultaban todo, luego mostraban) o eran engorrosas con expresiones regulares. Mi solución, sobre la base de lo anterior, es el siguiente:

var showselector = $('input:checkbox').map(function(){ 
     return this.checked ? '.' + this.id : null; 
    }).get().join(','); 
var hideselector = (showselector) ? ':not(' + showselector + ')' : '*'; 

$("div").filter(showselector).slideDown(1500); 
$("div").filter(hideselector).slideUp(1500); 

Answer 5

@Josiah Ruddell - el código no se está ejecutando en IE9

añadí "window.console & &" a la consola ... .log ... para ejecutar correlativamente en IE9

$('input').click(function() { 
    var selector = $('input:checkbox').map(function(){ 
     return this.checked ? '.' + this.id : ''; 
    }).get().join(''); 
    window.console && console.log(selector); 

    var all = $('div[class^="category"]'); 
    if(selector.length) 
     all.hide().filter(selector).show() 
    else all.show(); 
});