多个复选框过滤，JavaScript和jQuery

Question

请看一下这个JSFiddle示例 ，我不知道为什么它不起作用。 我呆了几个小时，感觉就像在地板上敲笔记本电脑。 PS我是JavaScript和jQuery的新手。

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div> <form style="text-align: center;"> Make: <label> <input type="checkbox" name="f1-1" value="honda" id="honda" />Honda</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="marutisuzuki" id="marutisuzuki" />Maruti Suzuki</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="volkswagen" id="volkswagen" />Volkswagen</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="hyundai" id="hyundai" />Hyundai</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="audi" id="audi" />Audi</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="bmw" id="bmw" />BMW</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="skoda" id="skoda" />Skoda</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="ford" id="ford" />Ford</label>&nbsp;&nbsp; </form> <br /> <form style="text-align: center;"> Year: <label> <input type="checkbox" name="f1-2" value="2002" id="2002" />2002</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2005" id="2005" />2005</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2006" id="2006" />2006</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2008" id="2008" />2008</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2009" id="2009" />2009</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2010" id="2010" />2010</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2011" id="2011" />2011</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2012" id="2012" />2012</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2013" id="2013" />2013</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2014" id="2014" />2014</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2015" id="2015" />2015</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2016" />2016</label>&nbsp;&nbsp; </form> </div> <br /> <div class="results"> <div class="result" data-id="marutiswift" data-category="marutisuzuki 2008"> <img src="images/marutiswift_black.jpg" alt="Maruti Swift" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Maruti Suzuki</p> <p>Model: Swift</p> <p>Year: 2008</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="audia4" data-category="audi 2010"> <img src="images/audia4_white.jpg" alt="Audi A4" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Audi</p> <p>Model: A4</p> <p>Year: 2010</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="hondacity" data-category="honda 2005"> <img src="images/hondacity_blue.jpg" alt="Honda City" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Honda</p> <p>Model: City</p> <p>Year: 2005</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="bmwz4" data-category="bmw 2012"> <img src="images/bmwz4_blue.jpg" alt="BMW Z4" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: BMW</p> <p>Model: Z4</p> <p>Year: 2012</p> <p>Price: 1,50,000</p> </div> <br /> <br /> <div class="result" data-id="volkswagenvento" data-category="volkswagen 2015"> <img src="images/volkswagenvento_red.jpg" alt="Volkswagen Vento" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Volkswagen</p> <p>Model: Vento</p> <p>Year: 2015</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="hondaamaze" data-category="honda 2011"> <img src="images/hondaamaze_maroon.png" alt="Honda Amaze" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Honda</p> <p>Model: Amaze</p> <p>Year: 2011</p> <p>Price: 1,50,000</p> </div> <div class="result" ddata-id="bmw720d" data-category="bmw 2009"> <img src="images/bmw720d_grey.jpg" alt="BMW 720d" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: BMW</p> <p>Model: 720d</p> <p>Year: 2009</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="maruti800" data-category="marutisuzuki 2009"> <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;"> <br /> <p>Make: Maruti Suzuki</p> <p>Model: 800</p> <p>Year: 2009</p> <p>Price: 1,50,000</p> </div> <br /> <br /> <div class="result" data-id="audia6" data-category="audi 2016"> <img src="images/audia6_white.jpg" alt="Audi A6" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Audi</p> <p>Model: A6</p> <p>Year: 2016</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="hondacivic" data-category="honda 2010"> <img src="images/hondacivic_white.jpg" alt="Honda Civic" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Honda</p> <p>Model: Civic</p> <p>Year: 2010</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="fordfigo" data-category="ford 2015"> <img src="images/fordfigo_red.jpg" alt="Ford Figo" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Ford</p> <p>Model: Figo</p> <p>Year: 2015</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="hyundaieon" data-category="hyundai 2013"> <img src="images/hyundaieon_blue.jpg" alt="Hyundai Eon" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Hyundai</p> <p>Model: Eon</p> <p>Year: 2013</p> <p>Price: 1,50,000</p> </div> <br /> <br /> <div class="result" data-id="hyundaiverna" data-category="hyundai 2006"> <img src="images/hyundaiverna_red.jpg" alt="Hyundai Verna" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Hyundai</p> <p>Model: Verna</p> <p>Year: 2006</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="fordfiesta" data-category="ford 2002"> <img src="images/fordfiesta_white.jpg" alt="Ford Fiesta" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Ford</p> <p>Model: Fiesta</p> <p>Year: 2002</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="skodarapid" data-category="skoda 2014"> <img src="images/skodarapid_white.jpg" alt="Skoda Rapid" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Skoda</p> <p>Model: Rapid</p> <p>Year: 2014</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="bmw320d" data-category="bmw 2015"> <img src="images/bmw320d_white.jpg" alt="BMW 320d" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: BMW</p> <p>Model: 320d</p> <p>Year: 2015</p> <p>Price: 1,50,000</p> </div> <br /> <br /> <div class="result" data-id="audir8" data-category="audi 2016"> <img src="images/audir8_blue.jpg" alt="Audi R8" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Audi</p> <p>Model: R8</p> <p>Year: 2016</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="hondabrio" data-category="honda 2013"> <img src="images/hondabrio_blue.jpg" alt="Honda Brio" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Honda</p> <p>Model: Brio</p> <p>Year: 2013</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="skodafabia" data-category="skoda 2012"> <img src="images/skodafabia_red.jpg" alt="Skoda Fabia" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Skoda</p> <p>Model: Fabia</p> <p>Year: 2012</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="volkswagenpolo" data-category="volkswagen 2014"> <img src="images/volkswagenpolo_white.jpg" alt="Volkswagen Polo" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Volkswagen</p> <p>Model: Polo</p> <p>Year: 2014</p> <p>Price: 1,50,000</p> </div> </div> 

Answer 1

您的选择器有误。

$checks = $(':checkbox[name^=fl]');

应该

$checks = $(':checkbox[name^=f1]');

更新的小提琴

Answer 2

尝试将您的过滤器逻辑更改为

 var $results = $('.result'), $checks = $(':checkbox[name^="f1"]'); $checks.change(function() { var $checked = $checks.filter(':checked'); /* show all when nothing checked*/ if (!$checked.length) { $results.show(); return; /* quit here if nothing checked */ } var filters = $('form').map(function() { var $checked = $(this).find('input:checkbox[name^="f1"]:checked'); return $checked.length ? [$checked.map(function() { return this.value }).get()] : undefined; }).get().filter(Boolean); var $filtered = $results.hide(); filters.forEach(function(values) { $filtered = $filtered.filter(function() { return $(this).data('category').split(' ').some(function(cat) { return values.indexOf(cat) > -1; }); }); }); $filtered.show(); /* do something when there aren't any matches */ if (!$results.length) { alert('Ooops...no matches'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form style="text-align: center;"> Make: <label> <input type="checkbox" name="f1-1" value="honda" id="honda" />Honda</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="marutisuzuki" id="marutisuzuki" />Maruti Suzuki</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="volkswagen" id="volkswagen" />Volkswagen</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="hyundai" id="hyundai" />Hyundai</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="audi" id="audi" />Audi</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="bmw" id="bmw" />BMW</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="skoda" id="skoda" />Skoda</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-1" value="ford" id="ford" />Ford</label>&nbsp;&nbsp; </form> <br /> <form style="text-align: center;"> Year: <label> <input type="checkbox" name="f1-2" value="2002" id="2002" />2002</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2005" id="2005" />2005</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2006" id="2006" />2006</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2008" id="2008" />2008</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2009" id="2009" />2009</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2010" id="2010" />2010</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2011" id="2011" />2011</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2012" id="2012" />2012</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2013" id="2013" />2013</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2014" id="2014" />2014</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2015" id="2015" />2015</label>&nbsp;&nbsp; <label> <input type="checkbox" name="f1-2" value="2016" />2016</label>&nbsp;&nbsp; </form> </div> <br /> <div class="results"> <div class="result" data-id="marutiswift" data-category="marutisuzuki 2008"> <img src="images/marutiswift_black.jpg" alt="Maruti Swift" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Maruti Suzuki</p> <p>Model: Swift</p> <p>Year: 2008</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="audia4" data-category="audi 2010"> <img src="images/audia4_white.jpg" alt="Audi A4" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Audi</p> <p>Model: A4</p> <p>Year: 2010</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="hondacity" data-category="honda 2005"> <img src="images/hondacity_blue.jpg" alt="Honda City" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Honda</p> <p>Model: City</p> <p>Year: 2005</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="bmwz4" data-category="bmw 2012"> <img src="images/bmwz4_blue.jpg" alt="BMW Z4" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: BMW</p> <p>Model: Z4</p> <p>Year: 2012</p> <p>Price: 1,50,000</p> </div> <br /> <br /> <div class="result" data-id="volkswagenvento" data-category="volkswagen 2015"> <img src="images/volkswagenvento_red.jpg" alt="Volkswagen Vento" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Volkswagen</p> <p>Model: Vento</p> <p>Year: 2015</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="hondaamaze" data-category="honda 2011"> <img src="images/hondaamaze_maroon.png" alt="Honda Amaze" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Honda</p> <p>Model: Amaze</p> <p>Year: 2011</p> <p>Price: 1,50,000</p> </div> <div class="result" ddata-id="bmw720d" data-category="bmw 2009"> <img src="images/bmw720d_grey.jpg" alt="BMW 720d" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: BMW</p> <p>Model: 720d</p> <p>Year: 2009</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="maruti800" data-category="marutisuzuki 2009"> <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;"> <br /> <p>Make: Maruti Suzuki</p> <p>Model: 800</p> <p>Year: 2009</p> <p>Price: 1,50,000</p> </div> <br /> <br /> <div class="result" data-id="audia6" data-category="audi 2016"> <img src="images/audia6_white.jpg" alt="Audi A6" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Audi</p> <p>Model: A6</p> <p>Year: 2016</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="hondacivic" data-category="honda 2010"> <img src="images/hondacivic_white.jpg" alt="Honda Civic" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Honda</p> <p>Model: Civic</p> <p>Year: 2010</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="fordfigo" data-category="ford 2015"> <img src="images/fordfigo_red.jpg" alt="Ford Figo" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Ford</p> <p>Model: Figo</p> <p>Year: 2015</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="hyundaieon" data-category="hyundai 2013"> <img src="images/hyundaieon_blue.jpg" alt="Hyundai Eon" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Hyundai</p> <p>Model: Eon</p> <p>Year: 2013</p> <p>Price: 1,50,000</p> </div> <br /> <br /> <div class="result" data-id="hyundaiverna" data-category="hyundai 2006"> <img src="images/hyundaiverna_red.jpg" alt="Hyundai Verna" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Hyundai</p> <p>Model: Verna</p> <p>Year: 2006</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="fordfiesta" data-category="ford 2002"> <img src="images/fordfiesta_white.jpg" alt="Ford Fiesta" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Ford</p> <p>Model: Fiesta</p> <p>Year: 2002</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="skodarapid" data-category="skoda 2014"> <img src="images/skodarapid_white.jpg" alt="Skoda Rapid" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Skoda</p> <p>Model: Rapid</p> <p>Year: 2014</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="bmw320d" data-category="bmw 2015"> <img src="images/bmw320d_white.jpg" alt="BMW 320d" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: BMW</p> <p>Model: 320d</p> <p>Year: 2015</p> <p>Price: 1,50,000</p> </div> <br /> <br /> <div class="result" data-id="audir8" data-category="audi 2016"> <img src="images/audir8_blue.jpg" alt="Audi R8" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Audi</p> <p>Model: R8</p> <p>Year: 2016</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="hondabrio" data-category="honda 2013"> <img src="images/hondabrio_blue.jpg" alt="Honda Brio" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Honda</p> <p>Model: Brio</p> <p>Year: 2013</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="skodafabia" data-category="skoda 2012"> <img src="images/skodafabia_red.jpg" alt="Skoda Fabia" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Skoda</p> <p>Model: Fabia</p> <p>Year: 2012</p> <p>Price: 1,50,000</p> </div> <div class="result" data-id="volkswagenpolo" data-category="volkswagen 2014"> <img src="images/volkswagenpolo_white.jpg" alt="Volkswagen Polo" width="265 px" height="200 px" style="margin-left: auto; margin-right: auto; display: block;"> <br /> <p>Make: Volkswagen</p> <p>Model: Polo</p> <p>Year: 2014</p> <p>Price: 1,50,000</p> </div> </div>