复选框 + 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>

我想根据所选内容隐藏/显示行。目前，我正在使用以下代码（在此先前的问题的帮助下：使用“this”简化代码（简单的jQuery））：

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

每次单击框时切换显示内容，如果每行只有一个类别，那么效果非常好。但是实际上不是这样的。当前设置的方式是，单击的顺序会改变所显示的行。因此，我需要创建一个函数来检查哪些复选框被选中，并显示包含任何复选框的行。我不反对添加一个按钮来实现这一点。

如果你们能提供任何帮助（以及指向可以帮助我学习的资源的方向），我将不胜感激！

- christina

---

@christina 为什么在定义处理程序后立即触发“change”事件？这是你想要做的吗？ - Alex

@Alex 这是一种根据复选框的初始状态快速设置行可见性的方法。 - kevingessner

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

- Josiah Ruddell

---

我认为这已经接近我想要做的事情了，但它仍然会隐藏一行，即使其中一个被选中而另一个没有被选中...例如，当A被选中而B未被选中时，具有类A B的行会被隐藏，尽管它应该是可见的。 - christina

@christina - 用我的修改试试看。你可能需要比table tr更具体的行选择器。 - Josiah Ruddell

我只是确保它在JSFiddle上能正常工作。http://jsfiddle.net/B9Hnu/ 我使用了ul li来创建表格的行。从你提供的链接来看，我觉得你需要一个比$('table tr')更好的选择器。 - Josiah Ruddell

我犯了一个小错，一直困扰着我，现在它完美地运行了。你太棒了。谢谢！ - christina

Answer 2

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

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

或者，我们可以消除对filter()的调用，直接将整个选择器传递给$()：

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

这将返回所有包含任何选中复选框的

元素，不仅仅是它的直接子元素。

并将其放置在您的.change()处理程序的上下文中：

我假设您想要显示与包含选中复选框的

元素相同类型的元素，并隐藏任何不符合条件的元素。因此，我们将利用.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(); 
});

- Alex

---

不太是我想要的。我不想隐藏/显示包含输入的li，我想显示/隐藏相关类别的表格行... - christina

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(); 

- Mark Baijens

---

我想查看哪些输入已被选中，并根据此显示/隐藏行，我认为这只是基于所点击的那个进行切换？ - christina

抱歉，我误解了问题。 - Mark Baijens

编辑后，将所有内容隐藏起来，然后切换所有选中匹配复选框的元素。 - Mark Baijens