我有一个动态的日期列表。我想为每个唯一日期创建一个复选框,然后以下面的表格格式列出所有日期。目标是当选中/取消选中复选框时,任何类与复选框值相同的行都将隐藏/显示。
感谢任何帮助。
$('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>
答案 0 :(得分:4)
最近将选择祖先或自我(第一个与选择器匹配),但您要选中已选中复选框的祖先(.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 强>
答案 1 :(得分:0)
使用复选框的this.value
并将其用作要切换的类。你可以这么做。
$('input[type = checkbox]').change(function () {
var myclass = this.value;
$('.' + myclass).toggle();
});
<强> jsFIDDLE DEMO 强>
答案 2 :(得分:0)
你可以添加一个css给tr,看看 DEMO
$('input[type="checkbox"]').change(function () {
var self = this;
$("table tr."+$(this).val()).css({display: self.checked?"block":"none"});
});
答案 3 :(得分:0)
我更新了 fiddle
基本上,您的选择器不正确:
$('input[type = checkbox]').change(function () {
var valu = $(this).val();
var ischecked = $(this).is(":checked");
if( ischecked ){
$('.' + valu).show();
}else{
$('.' + valu).hide();
}
});