title: Multiple checkbox filtering, JavaScript and jQuery
body: <p>Please have a look at this <a href="https://jsfiddle.net/oj2dp9bd/6/" rel="nofollow">JSFiddle example</a>, I've no clue why it's not working. I'm stuck with it for hours and feeling like banging the laptop on the floor.
  P.S. I'm a newbie to JavaScript and jQuery.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $results = $('.result'),
    $checks = $(':checkbox[name^=fl]');
  
  $checks.change(function() {
    var $checked = $checks.filter(':checked');
    /* show all when nothing checked*/
    if (!$checked.length) {
      $results.show();
      return; /* quit here if nothing checked */
    }
    /* create array of checked values */
    var checkedVals = $.map($checked, function(el) {
      return el.value
    });
    /* hide all results, then filter for matches */
    $results.hide().filter(function() {
      /* split categories for this result into an array*/
      var cats = $(this).data('category').split(' ');
      /* filter the checkedVals array to only values that match */
      var checkMatches = $.grep(checkedVals, function(val) {
        return $.inArray(val, cats) &gt; -1;
      });
      /* only return elements with matched array and original array being same length */
      return checkMatches.length === checkedVals.length;
      /* show results that match all the checked checkboxes */
    }).show();
    /* do something when there aren't any matches */
    if (!$results.length) {
      alert('Ooops...no matches');
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
    &lt;form style="text-align: center;"&gt;
      Make:
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-1" value="honda" id="honda" /&gt;Honda&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-1" value="marutisuzuki" id="marutisuzuki" /&gt;Maruti Suzuki&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-1" value="volkswagen" id="volkswagen" /&gt;Volkswagen&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-1" value="hyundai" id="hyundai" /&gt;Hyundai&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-1" value="audi" id="audi" /&gt;Audi&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-1" value="bmw" id="bmw" /&gt;BMW&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-1" value="skoda" id="skoda" /&gt;Skoda&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-1" value="ford" id="ford" /&gt;Ford&lt;/label&gt;&amp;nbsp;&amp;nbsp;
    &lt;/form&gt;
    &lt;br /&gt;
  
    &lt;form style="text-align: center;"&gt;
      Year:
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2002" id="2002" /&gt;2002&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2005" id="2005" /&gt;2005&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2006" id="2006" /&gt;2006&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2008" id="2008" /&gt;2008&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2009" id="2009" /&gt;2009&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2010" id="2010" /&gt;2010&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2011" id="2011" /&gt;2011&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2012" id="2012" /&gt;2012&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2013" id="2013" /&gt;2013&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2014" id="2014" /&gt;2014&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2015" id="2015" /&gt;2015&lt;/label&gt;&amp;nbsp;&amp;nbsp;
      &lt;label&gt;
        &lt;input type="checkbox" name="f1-2" value="2016" /&gt;2016&lt;/label&gt;&amp;nbsp;&amp;nbsp;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  
  &lt;div class="results"&gt;
    &lt;div class="result" data-id="marutiswift" data-category="marutisuzuki 2008"&gt;
      &lt;img src="images/marutiswift_black.jpg" alt="Maruti Swift" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Maruti Suzuki&lt;/p&gt;
      &lt;p&gt;Model: Swift&lt;/p&gt;
      &lt;p&gt;Year: 2008&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="audia4" data-category="audi 2010"&gt;
      &lt;img src="images/audia4_white.jpg" alt="Audi A4" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Audi&lt;/p&gt;
      &lt;p&gt;Model: A4&lt;/p&gt;
      &lt;p&gt;Year: 2010&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="hondacity" data-category="honda 2005"&gt;
      &lt;img src="images/hondacity_blue.jpg" alt="Honda City" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Honda&lt;/p&gt;
      &lt;p&gt;Model: City&lt;/p&gt;
      &lt;p&gt;Year: 2005&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="bmwz4" data-category="bmw 2012"&gt;
      &lt;img src="images/bmwz4_blue.jpg" alt="BMW Z4" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: BMW&lt;/p&gt;
      &lt;p&gt;Model: Z4&lt;/p&gt;
      &lt;p&gt;Year: 2012&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  
    &lt;div class="result" data-id="volkswagenvento" data-category="volkswagen 2015"&gt;
      &lt;img src="images/volkswagenvento_red.jpg" alt="Volkswagen Vento" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Volkswagen&lt;/p&gt;
      &lt;p&gt;Model: Vento&lt;/p&gt;
      &lt;p&gt;Year: 2015&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="hondaamaze" data-category="honda 2011"&gt;
      &lt;img src="images/hondaamaze_maroon.png" alt="Honda Amaze" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Honda&lt;/p&gt;
      &lt;p&gt;Model: Amaze&lt;/p&gt;
      &lt;p&gt;Year: 2011&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" ddata-id="bmw720d" data-category="bmw 2009"&gt;
      &lt;img src="images/bmw720d_grey.jpg" alt="BMW 720d" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: BMW&lt;/p&gt;
      &lt;p&gt;Model: 720d&lt;/p&gt;
      &lt;p&gt;Year: 2009&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="maruti800" data-category="marutisuzuki 2009"&gt;
      &lt;img src="images/maruti800_blue.jpg" alt="Maruti Suzuki 800" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Maruti Suzuki&lt;/p&gt;
      &lt;p&gt;Model: 800&lt;/p&gt;
      &lt;p&gt;Year: 2009&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  
    &lt;div class="result" data-id="audia6" data-category="audi 2016"&gt;
      &lt;img src="images/audia6_white.jpg" alt="Audi A6" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Audi&lt;/p&gt;
      &lt;p&gt;Model: A6&lt;/p&gt;
      &lt;p&gt;Year: 2016&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="hondacivic" data-category="honda 2010"&gt;
      &lt;img src="images/hondacivic_white.jpg" alt="Honda Civic" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Honda&lt;/p&gt;
      &lt;p&gt;Model: Civic&lt;/p&gt;
      &lt;p&gt;Year: 2010&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="fordfigo" data-category="ford 2015"&gt;
      &lt;img src="images/fordfigo_red.jpg" alt="Ford Figo" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Ford&lt;/p&gt;
      &lt;p&gt;Model: Figo&lt;/p&gt;
      &lt;p&gt;Year: 2015&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="hyundaieon" data-category="hyundai 2013"&gt;
      &lt;img src="images/hyundaieon_blue.jpg" alt="Hyundai Eon" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Hyundai&lt;/p&gt;
      &lt;p&gt;Model: Eon&lt;/p&gt;
      &lt;p&gt;Year: 2013&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  
    &lt;div class="result" data-id="hyundaiverna" data-category="hyundai 2006"&gt;
      &lt;img src="images/hyundaiverna_red.jpg" alt="Hyundai Verna" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Hyundai&lt;/p&gt;
      &lt;p&gt;Model: Verna&lt;/p&gt;
      &lt;p&gt;Year: 2006&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="fordfiesta" data-category="ford 2002"&gt;
      &lt;img src="images/fordfiesta_white.jpg" alt="Ford Fiesta" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Ford&lt;/p&gt;
      &lt;p&gt;Model: Fiesta&lt;/p&gt;
      &lt;p&gt;Year: 2002&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="skodarapid" data-category="skoda 2014"&gt;
      &lt;img src="images/skodarapid_white.jpg" alt="Skoda Rapid" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Skoda&lt;/p&gt;
      &lt;p&gt;Model: Rapid&lt;/p&gt;
      &lt;p&gt;Year: 2014&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="bmw320d" data-category="bmw 2015"&gt;
      &lt;img src="images/bmw320d_white.jpg" alt="BMW 320d" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: BMW&lt;/p&gt;
      &lt;p&gt;Model: 320d&lt;/p&gt;
      &lt;p&gt;Year: 2015&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  
    &lt;div class="result" data-id="audir8" data-category="audi 2016"&gt;
      &lt;img src="images/audir8_blue.jpg" alt="Audi R8" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Audi&lt;/p&gt;
      &lt;p&gt;Model: R8&lt;/p&gt;
      &lt;p&gt;Year: 2016&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="hondabrio" data-category="honda 2013"&gt;
      &lt;img src="images/hondabrio_blue.jpg" alt="Honda Brio" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Honda&lt;/p&gt;
      &lt;p&gt;Model: Brio&lt;/p&gt;
      &lt;p&gt;Year: 2013&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="skodafabia" data-category="skoda 2012"&gt;
      &lt;img src="images/skodafabia_red.jpg" alt="Skoda Fabia" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Skoda&lt;/p&gt;
      &lt;p&gt;Model: Fabia&lt;/p&gt;
      &lt;p&gt;Year: 2012&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="result" data-id="volkswagenpolo" data-category="volkswagen 2014"&gt;
      &lt;img src="images/volkswagenpolo_white.jpg" alt="Volkswagen Polo" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"&gt;
      &lt;br /&gt;
      &lt;p&gt;Make: Volkswagen&lt;/p&gt;
      &lt;p&gt;Model: Polo&lt;/p&gt;
      &lt;p&gt;Year: 2014&lt;/p&gt;
      &lt;p&gt;Price: 1,50,000&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>