根據複選框隱藏/顯示錶格行

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