title: Multiple checkbox filtering with jQuery
body: <p>The aim of the code is to use checkboxes for filtering. In the <a href="http://jsfiddle.net/richard91/NsASf/2/" rel="nofollow">JSFiddle example</a> you can see that there are 5 filter groups with checkboxes. </p>
  
  <p>The goal is: when somebody ticks multiple checkboxes, it should narrow the results list down, no matter if the checked checkboxes are in one filter group or in different groups. For example if you check two boxes in the Filter 1 group (e.g. Check1 and Check2) it should only display those results which are in Check1 AND Check2, which in this case is Result1 only. (Currently the code expands the results and if you check these 2 checkboxes it shows Result1, Result2, Result3 and Result9.)
  (The narrowing works if you check checkboxes in different Filter groups and it should remain this way.)</p>
  
  <p>Another goal is that, there are 5 Filter groups, but only the first 3 groups are coded in yet. How can I include the Filter 4 and Filter 5 groups in the code? </p>
  
  <p>Thank you for your help.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;style media="screen" type="text/css"&gt;
  
  body { font-family:'Arial'; color:#646464; }        
  .filtering-wrap { float:left; width:20%; margin:0 5% 0 0; padding:0; position:relative;}    
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="/javascript/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function() {
  
  var byFilter1 = [], byFilter2 = [], byFilter3 = [], byFilter4 = [], byFilter5 = [];
  
  $("input[name=fl-1]").on( "change", function() {
      if (this.checked) byFilter1.push("[data-category~='" + $(this).attr("value") + "']");
      else removeA(byFilter1, "[data-category~='" + $(this).attr("value") + "']");
  });
  
  $("input[name=fl-2]").on( "change", function() {
      if (this.checked) byFilter2.push("[data-category~='" + $(this).attr("value") + "']");
      else removeA(byFilter2, "[data-category~='" + $(this).attr("value") + "']");
  });
  
  $("input[name=fl-3]").on( "change", function() {
      if (this.checked) byFilter3.push("[data-category~='" + $(this).attr("value") + "']");
      else removeA(byFilter3, "[data-category~='" + $(this).attr("value") + "']");
  });
  
  $("input[name=fl-4]").on( "change", function() {
      if (this.checked) byFilter4.push("[data-category~='" + $(this).attr("value") + "']");
      else removeA(byFilter4, "[data-category~='" + $(this).attr("value") + "']");
  });
  
  $("input[name=fl-5]").on( "change", function() {
      if (this.checked) byFilter5.push("[data-category~='" + $(this).attr("value") + "']");
      else removeA(byFilter5, "[data-category~='" + $(this).attr("value") + "']");
  });
  
  $("input").on( "change", function() {
      var str = "Include items \n";
      var selector = '', cselector = '', nselector = '';
  
      var $lis = $('.results &gt; div'),
          $checked = $('input:checked');  
  
      if ($checked.length) {  
  
          if (byFilter1.length) {        
              if (str == "Include items \n") {
                  str += "    " + "with (" +  byFilter1.join(',') + ")\n";               
                  $($('input[name=fl-1]:checked')).each(function(index, byFilter1){
                      if(selector === '') {
                          selector += "[data-category~='" + byFilter1.id + "']";                     
                      } else {
                          selector += ",[data-category~='" + byFilter1.id + "']";    
                      }                
                  });                 
              } else {
                  str += "    AND " + "with (" +  byFilter1.join(' OR ') + ")\n";                
                  $($('input[name=fl-2]:checked')).each(function(index, byFilter1){
                      selector += "[data-category~='" + byFilter1.id + "']";
                  });
              }                           
          }
  
          if (byFilter2.length) {                       
              if (str == "Include items \n") {
                  str += "    " + "with (" +  byFilter2.join(' OR ') + ")\n";                   
                  $($('input[name=fl-2]:checked')).each(function(index, byFilter2){
                      if(selector === '') {
                          selector += "[data-category~='" + byFilter2.id + "']";                    
                      } else {
                          selector += ",[data-category~='" + byFilter2.id + "']";   
                      }                
                  });                 
              } else {
                  str += "    AND " + "with (" +  byFilter2.join(' OR ') + ")\n";               
                  $($('input[name=fl-2]:checked')).each(function(index, byFilter2){
                      if(cselector === '') {
                          cselector += "[data-category~='" + byFilter2.id + "']";                   
                      } else {
                          cselector += ",[data-category~='" + byFilter2.id + "']";  
                      }                   
                  });
              }           
          }
  
          if (byFilter3.length) {            
              if (str == "Include items \n") {
                  str += "    " + "with (" +  byFilter3.join(' OR ') + ")\n";                
                  $($('input[name=fl-3]:checked')).each(function(index, byFilter3){
                      if(selector === '') {
                          selector += "[data-category~='" + byFilter3.id + "']";                     
                      } else {
                          selector += ",[data-category~='" + byFilter3.id + "']";    
                      }                
                  });             
              } else {
                  str += "    AND " + "with (" +  byFilter3.join(' OR ') + ")\n";                
                  $($('input[name=fl-3]:checked')).each(function(index, byFilter3){
                      if(nselector === '') {
                          nselector += "[data-category~='" + byFilter3.id + "']";                    
                      } else {
                          nselector += ",[data-category~='" + byFilter3.id + "']";   
                      }   
                  });
              }            
          }
  
          $lis.hide(); 
          console.log(selector);
          console.log(cselector);
          console.log(nselector);
  
          if (cselector === '' &amp;&amp; nselector === '') {         
              $('.results &gt; div').filter(selector).show();
          } else if (cselector === '') {
              $('.results &gt; div').filter(selector).filter(nselector).show();
          } else if (nselector === '') {
              $('.results &gt; div').filter(selector).filter(cselector).show();
          } else {
              $('.results &gt; div').filter(selector).filter(cselector).filter(nselector).show();
          }
  
      } else {
          $lis.show();
      }   
  
      $("#result").html(str); 
  
  });
  
  function removeA(arr) {
      var what, a = arguments, L = a.length, ax;
      while (L &gt; 1 &amp;&amp; arr.length) {
          what = a[--L];
          while ((ax= arr.indexOf(what)) !== -1) {
              arr.splice(ax, 1);
          }
      }
      return arr;
  }
  
  });
          &lt;/script&gt;
  
  
          &lt;div class="filtering-wrap"&gt;
  
  
              &lt;p style="font-size:12px;"&gt;&lt;strong&gt;Filter 1&lt;/strong&gt;&lt;/p&gt;
              &lt;form&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-1" value="check1" id="check1" /&gt; Check1&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-1" value="check2" id="check2" /&gt; Check2&lt;/label&gt;&lt;br&gt; 
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-1" value="check3" id="check3" /&gt; Check3&lt;/label&gt;&lt;br&gt;                     
  
              &lt;/form&gt;
              &lt;p style="font-size:12px;"&gt;&lt;strong&gt;Filter 2&lt;/strong&gt;&lt;/p&gt;
              &lt;form&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-2" value="check4" id="check4" /&gt; Check4&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-2" value="check5" id="check5" /&gt; Check5&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-2" value="check6" id="check6" /&gt; Check6&lt;/label&gt;&lt;br&gt;                  
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-2" value="check7" id="check7" /&gt; Check7&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-2" value="check8" id="check8" /&gt; Check8&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-2" value="check9" id="check9" /&gt; Check9&lt;/label&gt;
              &lt;/form&gt;                
  
              &lt;p style="font-size:12px;"&gt;&lt;strong&gt;Filter 3&lt;/strong&gt;&lt;/p&gt;
              &lt;form&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-3" value="check10" id="check10" /&gt; Check10&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-3" value="check11" id="check11" /&gt; Check11&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-3" value="check12" id="check12" /&gt; Check12&lt;/label&gt;                
              &lt;/form&gt;                
  
              &lt;p style="font-size:12px;"&gt;&lt;strong&gt;Filter 4&lt;/strong&gt;&lt;/p&gt;
              &lt;form&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-4" value="check13" id="check13" /&gt; Check13&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-4" value="check14" id="check14" /&gt; Check14&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-4" value="check15" id="check15" /&gt; Check15&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-4" value="check16" id="check16" /&gt; Check16&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-4" value="check17" id="check17" /&gt; Check17&lt;/label&gt;
              &lt;/form&gt; 
  
  
              &lt;p style="font-size:12px;"&gt;&lt;strong&gt;Filter 5&lt;/strong&gt;&lt;/p&gt;
              &lt;form&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-5" value="check18" id="check18" /&gt; Check18&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-5" value="check19" id="check19" /&gt; Check19&lt;/label&gt;&lt;br&gt;
                  &lt;label style="font-size:12px;"&gt;&lt;input type="checkbox" name="fl-5" value="check20" id="check20" /&gt; Check20&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="results"&gt;
              &lt;div class="result" data-id="result1" data-category="check1 check2 check3 check4 check5 check6 check7 check8 check9 check10"&gt;Result1&lt;/div&gt;
              &lt;div class="result" data-id="result2" data-category="check1 check3 check5 check7 check9 check11 check13 check15 check17 check19"&gt;Result2&lt;/div&gt;
              &lt;div class="result" data-id="result3" data-category="check2 check4 check6 check8 check10 check12 check14 check16 check18 check20"&gt;Result3&lt;/div&gt;
              &lt;div class="result" data-id="result4" data-category="check5 check6 check7 check8 check9 check10"&gt;Result4&lt;/div&gt;  
              &lt;div class="result" data-id="result5" data-category="check15"&gt;Result5&lt;/div&gt;  
              &lt;div class="result" data-id="result6" data-category="check3 check13 check20"&gt;Result6&lt;/div&gt;  
              &lt;div class="result" data-id="result7" data-category="check11 check12 check13 check14 check15 check16"&gt;Result7&lt;/div&gt;  
              &lt;div class="result" data-id="result8" data-category="check4 check8 check12 check16 check20"&gt;Result8&lt;/div&gt; 
              &lt;div class="result" data-id="result9" data-category="check2 check3 check5 check7 check11 check13 check17 check19"&gt;Result9&lt;/div&gt; 
              &lt;div class="result" data-id="result10" data-category="check3 check6 check9 check12 check15 check18"&gt;Result10&lt;/div&gt; 
              &lt;div class="result" data-id="result11" data-category="check5 check10 check15 check20"&gt;Result11&lt;/div&gt;  
              &lt;div class="result" data-id="result12" data-category="check6 check12 check18"&gt;Result12&lt;/div&gt;  
              &lt;div class="result" data-id="result13" data-category="check7 check14"&gt;Result13&lt;/div&gt;  
              &lt;div class="result" data-id="result14" data-category="check8 check16"&gt;Result14&lt;/div&gt;    
  </code></pre>