复选框+ Jquery隐藏/显示

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

 
 A
 
 B
 
 C
 
 D
 
 E
 
 F
 
 fillerfillerfillerfillerfillerfillerfillerfillerfiller 

我想根据检查的内容隐藏/显示行。 目前我正在使用（在上一个问题的帮助下： 使用“this”来简化代码（简单的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为你创建了这个function！ 它被称为.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();