复选框+ Jquery隐藏/显示

时间:2010-11-22 19:54:58

标签: javascript jquery

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

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

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

我很感激你们可以给我的任何帮助(以及可以帮助我学习的资源方向)!

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

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

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

或者,我们可以取消对filter()的调用,只需将整个选择器传递给$()

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

这将返回包含任何已检查复选框的所有li元素,这些元素位于其后代中的任何位置,而不仅仅是它的直接子元素。

将其置于.change()处理程序的上下文中:

我假设您要显示 tr元素,这些元素与包含已选中复选框的li元素具有相同的类型,并且隐藏没有的任何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(); 
});

答案 2 :(得分:0)

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