在取消选中复选框时显示所有div
[英]Show all divs on Unchecking the checkboxes
问题描述
我有一个基于不同数据属性（例如数据品牌，数据存储等）的不同div中产品列表的代码。 我正在使用我的朋友帮助我开发的复选框选择来过滤记录。对此我需要做一些小的改动。
<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>
的CSS
.hidden {display: none;}
.content {border-radius: 5px; border: 1px solid #bbb;padding: 5px; margin: 5px; float: left;}
#filter {clear: left;}
脚本
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;}
上面的代码工作正常，我只需要对此做一点改动。 即，在开始时，选中两个复选框，即品牌（即耐克）和类别（即鞋）。 我只是希望一开始，这两个复选框也需要取消选中，所有记录都可见，但是当我从Andrew和Shoes复选框中删除“选中”时，不会发生过滤。
只是指导我如何在开始时不选中所有复选框，然后在选中复选框后进行过滤即可。 感谢帮助
2 个解决方案
解决方案1
0 2014-04-10 09:47:58
您的过滤器代码似乎有一些错误。 确保您在标题中添加了jQuery js！
要切换复选框和/或单选按钮的选中/未选中状态，只需从标记中添加/删除选中属性即可
<input type="checkbox"
name="category"
value="shoes" **checked**>
解决方案2
0 2014-04-10 17:49:06
好的，这就是问题所在：
您正在检查以下情况
if(show < l)
其中show是检查的filterCategories [在您的情况下： brand and category ]的计数。 将此值与l进行比较， l是存在的总filterCategories的计数。
因此，当仅检查一个类别时，此条件变为true，并遵循以下代码
`$this.addClass('hidden'); all++;`
被执行。 这使您的all++达到contents.length的值，因此将执行以下代码
if(all > contents.length - 1) contents.removeClass('hidden');
它会覆盖过滤器并显示所有项目[在您的情况下为divs]
要解决此问题，请参见以下代码。 activeFilterCount变量是必需的更改。 只需从var show=0,i;替换您的代码即可var show=0,i; all++;}并附有以下代码：
var show = 0, i, activeFilterCount=0; for(var c in checkBoxGroups){ var n = checkBoxGroups[c], d = $this.data(c); if(n.ch.length > 0){ activeFilterCount++; } for(i = 0; i < n.ch.length; i++){
if(d === n.ch[i]) { show++; break; } } } if(show < activeFilterCount) { $this.addClass('hidden'); all++; }
我知道它太长了，但希望对您有所帮助！ 让我知道是否有任何不清楚的地方。
jQuery - 选中所有/取消选中所有复选框 - 然后取消选中（或检查）其他复选框
[英]jQuery - check all/uncheck all checkboxes - then unchecking (or checking) additional ones
选中/取消选中复选框列表中的所有项目时的奇怪行为
[英]Strange behaviour when checking/unchecking all items in a list of checkboxes
取消选中单个复选框时，所有复选框都未选中 - 反应 redux
[英]all the checkboxes are uncheked while unchecking single checkbox - react redux
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.