在取消選中復選框時顯示所有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.