复选框+ jQuery的隐藏/显示

Question

我有一系列的一系列行和复选框来过滤他们：

<ul> 
<li><input id="type-A" type="checkbox" checked="checked"> <a href="/A">A</a></li> 
<li><input id="type-B" type="checkbox" checked="checked"> <a href="/B">B</a></li> 
<li><input id="type-C" type="checkbox" checked="checked"> <a href="/C">C</a></li> 
<li><input id="type-D" type="checkbox" checked="checked"> <a href="/D">D</a></li> 
<li><input id="type-E" type="checkbox" checked="checked"> <a href="/E">E</a></li> 
<li><input id="type-F" type="checkbox" checked="checked"> <a href="/F">F</a></li> 
</ul> 

<table> 
<tr class="A">filler</tr> 
<tr class="B">filler</tr> 
<tr class="A B">filler</tr> 
<tr class="C D">filler</tr> 
<tr class="A F">filler</tr> 
<tr class="A E F">filler</tr> 
<tr class="F">filler</tr> 
<tr class="C D E">filler</tr> 
<tr class="A B C D E F">filler</tr> 
</table> 

我想隐藏基于什么检查/显示行。目前我使用（从这个前面的问题的帮助：Use "this" to simplify code (simple jQuery)）：

$(function(){ 
    $("input[id^='type-']").change(function() { 
    $("."+this.id.replace('type-','')).toggle(this.checked); 
    }).change(); 
}); 

来回切换显示什么每次点击一个框和伟大工程，如果每行只有一个班的时间。但他们没有。它现在如何设置，点击顺序改变显示的行。所以我需要创建一个函数来检查选中的复选框并显示包含它们的行。我不反对添加按钮来实现这一点。

我会很感激任何帮助（和资源的方向可以帮助我学习），你们可以给我！

Answer 1

修改函数来获得一个选择为所有选中的复选框。

$(function(){ 
    var $checkboxes = $("input[id^='type-']"); 
    $checkboxes.change(function() { 
    var selector = ''; 
    $checkboxes.filter(':checked').each(function(){ // checked 
     selector += '.' + this.id.replace('type-','') + ', '; 
     // builds a selector like '.A, .B, .C, ' 
    }); 
    selector = selector.substring(0, selector.length - 2); // remove trailing ', ' 
    // tr selector 
    $('table tr').hide() // hide all rows 
     .filter(selector).show(); // reduce set to matched and show 
    }).change(); 
}); 

编辑：看jsfiddle

Answer 2

jQuery为您创建了这个功能！它被称为.filter()，它可以是选择器字符串，函数，原始DOM元素或jQuery对象。在你的情况下，我会传递一个选择器字符串。我们可以利用jQuery的:has()选择器，该选择器接受一个选择器并返回匹配的元素。所以，如果你想选择包含选中的复选框中的所有行（li元素），你可以做这样的：

$("li").filter(":has(input:checked)"); 

或者，我们可以消除我们呼吁filter()，只是整个选择传递给$()：

$("li:has(input:checked)"); 

这将返回包含任何所有li元素选中的复选框的任何地方它的后代中，不只是它的直接孩子。

，并把它在你的.change()处理程序的上下文：

我假设你想显示具有相同类型包含选中的复选框的li元素tr元素，隐藏任何tr没有的元素。因此，我们将利用.toggle()功能，切换元素的可见性：

$(function(){ 
    $("input[id^='type-']").change(function() { 
    $("."+this.id.replace('type-','')).toggle(this.checked); 
    // show any tr elements that have the class relating to the type of the inputs that contain checked checkboxes... 
    $("li:has(input:checked)").each(function() { 
     $("tr" + "." + this.id.replace(/type-/, "")).toggle(); 
    }); 
    }).change(); 
}); 

Answer 3

$("table tr").hide(); 
    $("input[id^='type-']").each(function() { 
    element = $(this); 
    $("table tr").each(function() { 
     if($(this).hasClass(element.id.replace('type-','')) { 
     if(element.is(":checked") { 
      element.show(); 
     } 
     } 
    }); 
    }).change();