复选框 + 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() 处理程序的上下文中：

我假设您要显示 tr 元素与包含选中复选框的li 元素具有相同类型，并隐藏任何@987654335 @ 没有的元素。因此，我们将使用.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();