根據復選框隱藏/顯示表格行

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

演示

但在這種情況下，您可以執行以下操作，因為您對目標使用相同的類：

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

演示

Answer 2

使用復選框的this.value並將其用作要切換的類。 你可以這么做。

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

jsFIDDLE DEMO

Answer 3

你可以只為tr添加一個css，看看這個DEMO

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

Answer 4

我更新了你的小提琴

基本上，您的選擇器不正確：

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

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