在取消选中复选框时显示所有div

Question

I have a code for product list in different divs based on different data attributes like data-brand,data-store and some more. 我有一个基于不同数据属性（例如数据品牌，数据存储等）的不同div中产品列表的代码。 I am filtering the records with checkbox selection which my friend helped me to develop.I need small change in this.Look at the code. 我正在使用我的朋友帮助我开发的复选框选择来过滤记录。对此我需要做一些小的改动。

<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 的CSS

.hidden {display: none;}

.content {border-radius: 5px; border: 1px solid #bbb;padding: 5px; margin: 5px; float: left;}
#filter {clear: left;}

script 脚本

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;}

The above code is working fine.I just need one small change in this. 上面的代码工作正常，我只需要对此做一点改动。 That is, on start two checkboxes are checked iefor brand ieNike and category ie shoes. 即，在开始时，选中两个复选框，即品牌（即耐克）和类别（即鞋）。 I just want that on the start, these two checkboxes also need to be unchecked,all records visible,but when I am removing the 'checked' from Andrew and Shoes checkbox,Filtering doesnot happen. 我只是希望一开始，这两个复选框也需要取消选中，所有记录都可见，但是当我从Andrew和Shoes复选框中删除“选中”时，不会发生过滤。

Just guide me how to keep all checkboxes unchecked on start and then filtering should work after selecting the checkboxes. 只是指导我如何在开始时不选中所有复选框，然后在选中复选框后进行过滤即可。 Thanks for help 感谢帮助

Answer 1

Your filter code seems to be a little buggy. 您的过滤器代码似乎有一些错误。 Make sure you are adding the jquery js in the header! 确保您在标题中添加了jQuery js！

To toggle checked/unchecked state of your checkboxes and/or radio-buttons simply add/remove the checked attribute from the tag 要切换复选框和/或单选按钮的选中/未选中状态，只需从标记中添加/删除选中属性即可

<input type="checkbox" 
           name="category" 
           value="shoes" **checked**>

Answer 2

Ok so this is the problem: 好的，这就是问题所在：

You are checking the following condition 您正在检查以下情况

if(show < l)

where show is the count of filterCategories [ in your case: brand and category ] that are checked. 其中show是检查的filterCategories [在您的情况下： brand and category ]的计数。 This is being compared against l which is count of total filterCategories present. 将此值与l进行比较， l是存在的总filterCategories的计数。

So, when only one of the categories is checked, this conditions becomes true, and following code 因此，当仅检查一个类别时，此条件变为true，并遵循以下代码

  `$this.addClass('hidden'); all++;`

gets executed. 被执行。 This makes your all++ reach the value of contents.length hence your following code gets executed 这使您的all++达到contents.length的值，因此将执行以下代码

  if(all > contents.length - 1) contents.removeClass('hidden');

which overrides the filters and shows all the items [ in your case the divs ] 它会覆盖过滤器并显示所有项目[在您的情况下为divs]

To fix this see the following code. 要解决此问题，请参见以下代码。 The activeFilterCount variable is the change that is required. activeFilterCount变量是必需的更改。 Just replace your code from var show=0,i; 只需从var show=0,i;替换您的代码即可var show=0,i; to all++;} with the following code: 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++; }

I know it got a little too lengthy, but I hope it helps you! 我知道它太长了，但希望对您有所帮助！ Let me know if anything is not clear. 让我知道是否有任何不清楚的地方。

在取消选中复选框时显示所有div

问题描述

2 个解决方案

解决方案1
0 2014-04-10 09:47:58

解决方案2
0 2014-04-10 17:49:06

在取消选中复选框时显示所有div

问题描述

2 个解决方案

解决方案1 0 2014-04-10 09:47:58

解决方案2 0 2014-04-10 17:49:06

解决方案1
0 2014-04-10 09:47:58

解决方案2
0 2014-04-10 17:49:06