[英]Hide/Show table row(s) based on checkbox
I have a dynamic list of dates. 我有一个动态的日期列表。 I want to create a checkbox for each unique date, and then list all dates in a table row format below. 我想为每个唯一日期创建一个复选框,然后以下面的表格格式列出所有日期。 The goal is when a checkbox is checked/unchecked, any rows with a class the same as the checkbox value will hide/show. 目标是当选中/取消选中复选框时,任何类与复选框值相同的行都将隐藏/显示。
Any help is appreciated. 任何帮助表示赞赏。
$('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/ 小提琴: http : //jsfiddle.net/fEM8X/9/
Closest will select the ancestor or self (first one that matches the selector), but you want to select the sibling of ancestor ( .widget
) of the checked check box. 最近将选择祖先或自我(第一个匹配选择器),但您要选中已选中复选框的祖先( .widget
)的兄弟。 So Try: 所以尝试:
$('input[type = checkbox]').change(function () {
var self = this;
$(self).closest('.widget').next('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});
But in this case you can just do the following since you use the same classes for the targets: 但在这种情况下,您可以执行以下操作,因为您对目标使用相同的类:
$('.' + this.value).toggle(self.checked);
Use this.value
of the checked box and use it as class to toggle. 使用复选框的this.value
并将其用作要切换的类。 You could simply do this. 你可以这么做。
$('input[type = checkbox]').change(function () {
var myclass = this.value;
$('.' + myclass).toggle();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.