根据复选框隐藏/显示表格行

Question

我有一个动态的日期列表。我想为每个唯一日期创建一个复选框，然后在下面的表格行格式中列出所有日期。目标是当复选框被选中/取消选中时，任何具有与复选框值相同的类的行都将隐藏/显示。

任何帮助表示赞赏。

$('input[type = checkbox]').change(function() { 
    var self = this; 
    $(self).closest('table').find('tbody tr').filter('.' + self.value).toggle(self.checked); 
}); 





<div class="widget"> 
    <div class="rowElem noborder"> 
     <div class="formRight"> 
      <label> 
       <input type="checkbox" class="show" value="2013-11-15" checked />2013-11-15</label> 
     </div> 
     <div class="formRight"> 
      <label> 
       <input type="checkbox" class="show" value="2013-11-17" checked />2013-11-17</label> 
     </div> 
     <div class="formRight"> 
      <label> 
       <input type="checkbox" class="show" value="2013-11-20" checked /> 2013-11-20</label> 
     </div> 
    </div> 
</div> 
<table> 
    <tbody> 
     <tr class="2013-11-15"> 
      <td>2013-11-15</td> 
     </tr> 
     <tr class="2013-11-15"> 
      <td>2013-11-15</td> 
     </tr> 
     <tr class="2013-11-20"> 
      <td>2013-11-20</td> 
     </tr> 
     <tr class="2013-11-15"> 
      <td>2013-11-15</td> 
     </tr> 
     <tr class="2013-11-17"> 
      <td>2013-11-17</td> 
     </tr> 
     <tr class="2013-11-20"> 
      <td>2013-11-20</td> 
     </tr> 
    </tbody> 
</table> 

小提琴：http://jsfiddle.net/fEM8X/9/

Answer 1

最近将选择祖先或自我（即选择匹配的第一个），但你要选择的检查复选框的祖先（.widget）的兄弟。因此，尝试：

$('input[type = checkbox]').change(function() { 
    var self = this; 
    $(self).closest('.widget').next('table').find('tbody tr').filter('.' + self.value).toggle(self.checked); 
}); 

Demo

但在这种情况下，你可以做以下的，因为你使用相同的类目标：

$('.' + this.value).toggle(self.checked); 

Demo

Answer 2

使用this.value的选中框并将其用作类切换。你可以简单地做到这一点。

$('input[type = checkbox]').change(function() { 
    var myclass = this.value; 
    $('.' + myclass).toggle(); 
}); 

jsFIDDLE DEMO

Answer 3

你可以添加CSS来TR，看到这个DEMO

$('input[type="checkbox"]').change(function() {  
    var self = this; 
    $("table tr."+$(this).val()).css({display: self.checked?"block":"none"}); 
}); 

Answer 4

我更新了fiddle

基本上，你的选择是不正确的：

$('input[type = checkbox]').change(function() { 
    var valu = $(this).val(); 
    var ischecked = $(this).is(":checked"); 

    if(ischecked){ 
     $('.' + valu).show(); 
    }else{ 
     $('.' + valu).hide(); 
    } 
});