我有一系列的行和复选框来过滤它们:
<ul>
<li><input id="type-A" type="checkbox" checked="checked"> <a href="/A">A</a></li>
<li><input id="type-B" type="checkbox" checked="checked"> <a href="/B">B</a></li>
<li><input id="type-C" type="checkbox" checked="checked"> <a href="/C">C</a></li>
<li><input id="type-D" type="checkbox" checked="checked"> <a href="/D">D</a></li>
<li><input id="type-E" type="checkbox" checked="checked"> <a href="/E">E</a></li>
<li><input id="type-F" type="checkbox" checked="checked"> <a href="/F">F</a></li>
</ul>
<table>
<tr class="A">filler</tr>
<tr class="B">filler</tr>
<tr class="A B">filler</tr>
<tr class="C D">filler</tr>
<tr class="A F">filler</tr>
<tr class="A E F">filler</tr>
<tr class="F">filler</tr>
<tr class="C D E">filler</tr>
<tr class="A B C D E F">filler</tr>
</table>
我想根据检查的内容隐藏/显示行。目前我正在使用(在上一个问题的帮助下:Use "this" to simplify code (simple jQuery)):
$(function(){
$("input[id^='type-']").change(function() {
$("."+this.id.replace('type-','')).toggle(this.checked);
}).change();
});
每次单击一个框时都会切换显示的内容,如果每行只有一个类,则效果很好。但他们没有。现在如何设置,单击顺序会更改显示的行。所以我需要创建一个函数来检查选中的复选框,并显示包含其中任何复选框的行。我并不反对添加按钮来实现这一目标。
我很感激你们可以给我的任何帮助(以及可以帮助我学习的资源方向)!
答案 0 :(得分:2)
修改函数以获取所有选中复选框的选择器。
$(function(){
var $checkboxes = $("input[id^='type-']");
$checkboxes.change(function() {
var selector = '';
$checkboxes.filter(':checked').each(function(){ // checked
selector += '.' + this.id.replace('type-','') + ', ';
// builds a selector like '.A, .B, .C, '
});
selector = selector.substring(0, selector.length - 2); // remove trailing ', '
// tr selector
$('table tr').hide() // hide all rows
.filter(selector).show(); // reduce set to matched and show
}).change();
});
编辑:见jsfiddle
答案 1 :(得分:0)
jQuery为您创建了这个功能!它被称为.filter()
,它接受选择器字符串,函数,原始DOM元素或jQuery对象。在你的情况下,我会传递一个选择器字符串。我们可以使用jQuery的:has()
选择器,它接受一个选择器并返回匹配的元素。因此,如果您想选择包含已选中复选框的所有行(li
元素),您可以这样做:
$("li").filter(":has(input:checked)");
或者,我们可以取消对filter()
的调用,只需将整个选择器传递给$()
:
$("li:has(input:checked)");
这将返回包含任何已检查复选框的所有li
元素,这些元素位于其后代中的任何位置,而不仅仅是它的直接子元素。
将其置于.change()
处理程序的上下文中:
我假设您要显示 tr
元素,这些元素与包含已选中复选框的li
元素具有相同的类型,并且隐藏没有的任何tr
元素。因此,我们将使用.toggle()
函数来切换元素的可见性:
$(function(){
$("input[id^='type-']").change(function() {
$("."+this.id.replace('type-','')).toggle(this.checked);
// show any tr elements that have the class relating to the type of the inputs that contain checked checkboxes...
$("li:has(input:checked)").each(function() {
$("tr" + "." + this.id.replace(/type-/, "")).toggle();
});
}).change();
});
答案 2 :(得分:0)
$("table tr").hide();
$("input[id^='type-']").each(function() {
element = $(this);
$("table tr").each(function() {
if($(this).hasClass(element.id.replace('type-','')) {
if(element.is(":checked") {
element.show();
}
}
});
}).change();