使用 jQuery 过滤复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8796472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Filtering with checkboxes using jQuery
提问by Ronni DC
I want to filter some content using checkboxes.
我想使用复选框过滤一些内容。
I've managed to do that thanks to an earlier postwhich I've simplified a bit here DEMO.
由于之前的一篇文章，我已经成功做到了这一点，我在这里对DEMO 进行了一些简化。
My problem is that each content item can have more than one category attached.When I select category A and category B and then deselect category B, the content item that have both categories attached are removed.
我的问题是每个内容项可以附加多个类别。当我选择类别 A 和类别 B 然后取消选择类别 B 时，将删除同时附加了两个类别的内容项目。
The project I'm working on is going to contain more than two categories. A content item can have many categories attached
我正在从事的项目将包含两个以上的类别。一个内容项可以附加多个类别
HTML:
HTML：
<ul id="filters">
<li>
<input type="checkbox" value="categorya" id="filter-categorya" />
<label for="filter-categorya">Category A</label>
</li>
<li>
<input type="checkbox" value="categoryb" id="filter-categoryb" />
<label for="filter-categoryb">Category B</label>
</li>
</ul>
<div class="categorya categoryb">A, B</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>
Javascript:
Javascript：
$('input').click(function() {
var category = $(this).val();
if (!$(this).attr('checked')) $('.' + category).hide();
else $('.' + category).show();
});
回答by nnnnnn
I think the two most straightforward approaches would be on click of any of the filter checkboxes either:
我认为最直接的两种方法是单击任何过滤器复选框：
Hide all
<div>elements, then loop through the checkboxes and for each checked one.show()the<div>elements with the associated category.Loop through all checkboxes to make a list of the classes to be shown, then loop through the
<div>elements, checking each one to see if it has one of those classes and.hide()or.show()as appropriate.
隐藏所有
<div>元素，然后遍历复选框，并为每个选中.show()的<div>元素循环关联类别。循环遍历所有复选框以制作要显示的类的列表，然后循环遍历
<div>元素，检查每个元素以查看它是否具有这些类中的一个.hide()或.show()视情况而定。
Is there some general selector you can use to get all the <div>elements? Do they have a particular container element, like how all the checkboxes are descendents of "#filters"?
是否有一些通用选择器可以用来获取所有<div>元素？它们是否具有特定的容器元素，例如所有复选框都是“#filters”的后代？
// Solution 1
$("#filters :checkbox").click(function() {
$("div").hide();
$("#filters :checkbox:checked").each(function() {
$("." + $(this).val()).show();
});
});
Demo: http://jsfiddle.net/6wYzw/41/
演示：http: //jsfiddle.net/6wYzw/41/
// Solution 2
$("#filters :checkbox").click(function() {
var re = new RegExp($("#filters :checkbox:checked").map(function() {
return this.value;
}).get().join("|") );
$("div").each(function() {
var $this = $(this);
$this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
});
});
Demo: http://jsfiddle.net/6wYzw/42/
演示：http: //jsfiddle.net/6wYzw/42/
I guess the first way is shorter, and easier to maintain...
我想第一种方法更短，更容易维护......
回答by J.H.
I wanted to add jquery animation to showing and hiding. The above solutions were not allowing this (first hiding everything, then showing) or were cumbersome with regular expressions. My solution, based on the above, is as follows:
我想将 jquery 动画添加到显示和隐藏中。上述解决方案不允许这样做（首先隐藏所有内容，然后显示）或者使用正则表达式很麻烦。基于上述，我的解决方案如下：
var showselector = $('input:checkbox').map(function(){
return this.checked ? '.' + this.id : null;
}).get().join(',');
var hideselector = (showselector) ? ':not(' + showselector + ')' : '*';
$("div").filter(showselector).slideDown(1500);
$("div").filter(hideselector).slideUp(1500);
回答by Josiah Ruddell
When they click on a checkbox build a selector like this:
当他们点击一个复选框时，会构建一个这样的选择器：
var selector = $('input:checkbox').map(function(){
return this.checked ? '.' + this.id : '';
}).get().join('');
This will generate a selector like categoryb.categoryc(an ANDcss selector). You can then hide all, and show the ones that meet the selector.
这将生成一个选择器categoryb.categoryc（一个ANDcss 选择器）。然后您可以隐藏所有，并显示符合选择器的那些。
$('div[class^="category"]')
.hide()
.filter(selector)
.show();
Try it out on jsbin
Working Code:
工作代码：
$('input').click(function() {
var selector = $('input:checkbox').map(function(){
return this.checked ? '.' + this.id : '';
}).get().join('');
console.log(selector);
var all = $('div[class^="category"]');
if(selector.length)
all.hide().filter(selector).show()
else all.show();
});
回答by Jake Feasel
$('input').click(function() {
var category = $(this).val();
$('.' + category).each(function () {
var anyChecked = false;
var classArray = this.className.split(/\s+/);
for(idx in classArray)
{
if ($('#filter-' + classArray[idx]).is(":checked"))
{
anyChecked = true;
break;
}
}
if (! anyChecked) $(this).hide();
else $(this).show();
});
});
Basically, I check each category checkbox associated with those items related to the currently-clicked filter. If any of them are still checked, then the item is displayed; otherwise, it is hidden.
基本上，我检查与当前单击的过滤器相关的那些项目关联的每个类别复选框。如果其中任何一个仍然被选中，则显示该项目；否则，它是隐藏的。
回答by Es piaT
@Josiah Ruddell - the code isn't running in IE9
@Josiah Ruddell - 代码未在 IE9 中运行
I added "window.console &&" to the ... console.log ... to run correytly in IE9
我将“window.console &&”添加到... console.log ... 以在 IE9 中正确运行
$('input').click(function() {
var selector = $('input:checkbox').map(function(){
return this.checked ? '.' + this.id : '';
}).get().join('');
window.console && console.log(selector);
var all = $('div[class^="category"]');
if(selector.length)
all.hide().filter(selector).show()
else all.show();
});
