基于复选框隐藏/显示表格行

Hide/Show table row(s) based on checkbox

本文关键字：显示 表格 隐藏 复选框      更新时间：2023-09-26

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

感谢您的帮助。

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

Fiddle：http://jsfiddle.net/fEM8X/9/

Closest将选择祖先或自身（与选择器匹配的第一个），但您希望选择选中复选框的祖先（.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);

演示

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

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

jsFIDDLE演示

您只需在tr中添加一个css，即可查看此DEMO

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

我更新了小提琴

基本上，您的选择器不正确：

$('input[type = checkbox]').change(function () {
    var valu = $(this).val();
    var ischecked = $(this).is(":checked");
    if( ischecked ){
        $('.' + valu).show();
    }else{
        $('.' + valu).hide();
    }
});
相关文章：