复选框+ Jquery隐藏/显示 [英] Checkboxes + Jquery hide/show

问题描述

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

I have a series of a series of rows and checkboxes to filter them:

<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>

我想根据检查的内容隐藏/显示行。目前我正在使用（在上一个问题的帮助下：使用这个 ;简化代码（简单jQuery））：

I'd like to hide/show rows based on what is checked. Currently I'm using (with the help from this previous question: Use "this" to simplify code (simple jQuery) ):

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

每次单击一个框时切换显示的内容，如果每行只有一个类，则效果很好。但他们没有。现在如何设置，单击顺序会更改显示的行。所以我需要创建一个函数来检查选中的复选框，并显示包含其中任何复选框的行。我并不反对添加按钮来实现这一目标。

Which toggles what is shown every time a box is clicked and works great if each row only has one class. But they don't. How it's set up now, the order of clicking changes the rows that are shown. So I need to create a function that checks which checkboxes are checked and shows the rows that contain any of them. I'm not opposed to adding a button to make this happen.

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

I'd appreciate any help (and the direction to resources that could help me learn) you guys could give me!

推荐答案

修改函数以获取所有选中复选框的选择器。

Modify the function to get a selector for all the checked check boxes.

$(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

这篇关于复选框+ Jquery隐藏/显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！