Javascript 取消选中复选框时显示所有div
我有一个基于不同数据属性的产品列表代码,如数据品牌、数据存储等等。我正在用我的朋友帮助我开发的复选框选择筛选记录。我需要在这方面做一些小改动。看看代码Javascript 取消选中复选框时显示所有div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个基于不同数据属性的产品列表代码,如数据品牌、数据存储等等。我正在用我的朋友帮助我开发的复选框选择筛选记录。我需要在这方面做一些小改动。看看代码 <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div> <div class="content
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<div class="content"
data-category="shoes"
data-price="4000"
data-size="38"
data-brand="Nike">
<img src="http://placehold.it/120x80">
<p>Nike 38<br>$4000</p>
</div>
<div class="content"
data-category="shirts"
data-price="6000"
data-size="20"
data-brand="Nike">
<img src="http://placehold.it/140x80">
<p>Nike 20<br>$6000</p>
</div>
<div class="content"
data-category="shoes"
data-price="500"
data-size="20"
data-brand="Andrew">
<img src="http://placehold.it/120x80">
<p>Andrew 20<br>$500</p>
</div>
<div class="content"
data-category="shoes"
data-price="780"
data-size="42"
data-brand="Andrew">
<img src="http://placehold.it/120x80">
<p>Andrew 42<br>$780</p>
</div>
<div class="content"
data-category="shirts"
data-price="1200"
data-size="40"
data-brand="Sunbaby">
<img src="http://placehold.it/140x80">
<p>Sunbaby 40<br>$1200</p>
</div>
<div class="content"
data-category="shoes"
data-price="2000"
data-size="70"
data-brand="Andrew">
<img src="http://placehold.it/120x80">
<p>Andrew 70<br>$2000</p>
</div>
<div class="content"
data-category="shoes"
data-price="800"
data-size="50"
data-brand="Sunbaby">
<img src="http://placehold.it/120x80">
<p>Sunbaby 50<br>$800</p>
</div>
<div class="content"
data-category="shirts"
data-price="1300"
data-size="20"
data-brand="Nike">
<img src="http://placehold.it/140x80">
<p>Nike 20<br>$1300</p>
</div>
<div class="content"
data-category="shirts"
data-price="800"
data-size="35"
data-brand="Andrew">
<img src="http://placehold.it/140x80">
<p>Andrew 35<br>$800</p>
</div>
</div>
<form id="filter">
<div>
<input type="checkbox"
name="brand"
value="Andrew" checked>
Andrew
</input>
<input type="checkbox"
name="brand"
value="Sunbaby">
Sunbaby
</input>
<input type="checkbox"
name="brand"
value="Nike">
Nike
</input>
</div>
<div>
<input type="checkbox"
name="category"
value="shoes" checked>
Shoes
</input>
<input type="checkbox"
name="category"
value="shirts">
Shirts
</input>
</div>
<div>
<input type="radio"
name="price"
value="0-9000"
checked>
All
</input>
<input type="radio"
name="price"
value="0-999">
$0-$1000
</input>
<input type="radio"
name="price"
value="1000-2000">
$1000-$2000
</input>
<div>
<div>
<input type="radio"
name="size"
value="0-80"
checked>
All
</input>
<input type="radio"
name="size"
value="0-25">
Small
</input>
<input type="radio"
name="size"
value="26-45">
Medium
</input>
<input type="radio"
name="size"
value="46-80">
Big
</input>
<div>
</form>
</body>
</html>
剧本
var filterContentForm = function(content, form){
var filter = function() {
var checkBoxGroups = {},
radioGroups = {};
var addRadioGroup = function(name){
radioGroups[name] = {
el: $('input[name='+name+']:checked')
};
var n = radioGroups[name];
n.el
.each(function(){
n.range = $(this).val().split('-');
n.from = Number(n.range[0]);
n.to = Number(n.range[1]);
});
};
$('#filter input[type=radio]')
.each(function(){
addRadioGroup($(this).attr('name'));
});
var addCheckBoxGroup = function(name){
checkBoxGroups[name] = {
el: $('input[name='+name+']:checked'),
ch: []
};
var n = checkBoxGroups[name];
n.el.each(function(){
n.ch.push($(this).val());
});
};
$('#filter input[type=checkbox]')
.each(function(){
addCheckBoxGroup($(this).attr('name'));
});
var contents = $(content), all = 0;
contents.removeClass('hidden')
.each(function(){
var $this = $(this),
price = $this.data('price');
for(var c in radioGroups){
var n = radioGroups[c],
d = Number($this.data(c));
if(d < n.from || d > n.to){
$this.addClass('hidden');
all++;
return;
}
}
var show = 0, i;
for(var c in checkBoxGroups){
var n = checkBoxGroups[c],
d = $this.data(c);
for(i = 0; i < n.ch.length; i++){
if(d === n.ch[i]) {
show++; break;
}
}
}
var l = Object.keys(checkBoxGroups).length;
if(show < l) {
$this.addClass('hidden');
all++;
}
});
if(all > contents.length - 1)
contents.removeClass('hidden');
};
$(form+' input').change(filter);
filter();
};
filterContentForm('.content', '#filter');
#filter {clear: left;}
上面的代码运行良好。我只需要在这方面做一个小的更改。也就是说,在开始时选中了两个复选框,即品牌(即Nike)和类别(即鞋子)。我只想在一开始,这两个复选框也需要取消选中,所有记录都可见,但当我从Andrew and Shoes复选框中删除“选中”时,过滤不会发生
只需指导我如何在开始时保持所有复选框未选中,然后在选中复选框后进行过滤即可。
感谢您的帮助您的筛选代码似乎有点问题。 确保您正在标题中添加jquery js 要切换复选框和/或单选按钮的选中/未选中状态,只需从标记中添加/删除选中属性
<input type="checkbox"
name="category"
value="shoes" **checked**>
好的,这就是问题所在: 您正在检查以下条件 ifshow
我知道它有点太长了,但我希望它能帮助你!如果有什么不清楚的地方,请告诉我。您能创建一个JSFIDIC文件吗this@NevilleNazerane试着从我之前的答案中获得帮助:如何在开始时保持所有复选框未选中?只需从复选框中删除选中的属性。我认为您的筛选功能无法正常工作,但这是如何在我尝试使用您的逻辑时,从未选中任何内容开始,然后将您的功能附加到复选框/radio change@Varun,即仅使用鞋选中复选框。筛选有效。但当我同时使用鞋和andrew checkbox.filter不起作用。如何使过滤器在所有复选框未选中的情况下工作…只需在Anton在上面的评论中给出的JSFIDLE链接上选中它。这种组合很有效。问题发生在没有检查任何一个品牌或类别时。我只检查了那一个。你能检查一下吗?一旦我有时间调查,我会告诉你确切的问题。可能再过几个小时@Varun似乎不是在我本地的电脑上运行代码,而是在小提琴上运行。有什么线索吗,先生???不看文件就很难猜到。你能详细说明什么不起作用吗?一个问题可能是缓存。清除缓存并重试。
<input type="checkbox"
name="category"
value="shoes" **checked**>
`$this.addClass('hidden');
all++;`
if(all > contents.length - 1)
contents.removeClass('hidden');