请查看此JSFiddle example,我不知道为什么它不起作用。我呆了几个小时,感觉就像在地板上敲笔记本电脑。
附言我是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>
<label>
<input type="checkbox" name="f1-1" value="marutisuzuki" id="marutisuzuki" />Maruti Suzuki</label>
<label>
<input type="checkbox" name="f1-1" value="volkswagen" id="volkswagen" />Volkswagen</label>
<label>
<input type="checkbox" name="f1-1" value="hyundai" id="hyundai" />Hyundai</label>
<label>
<input type="checkbox" name="f1-1" value="audi" id="audi" />Audi</label>
<label>
<input type="checkbox" name="f1-1" value="bmw" id="bmw" />BMW</label>
<label>
<input type="checkbox" name="f1-1" value="skoda" id="skoda" />Skoda</label>
<label>
<input type="checkbox" name="f1-1" value="ford" id="ford" />Ford</label>
</form>
<br />
<form style="text-align: center;">
Year:
<label>
<input type="checkbox" name="f1-2" value="2002" id="2002" />2002</label>
<label>
<input type="checkbox" name="f1-2" value="2005" id="2005" />2005</label>
<label>
<input type="checkbox" name="f1-2" value="2006" id="2006" />2006</label>
<label>
<input type="checkbox" name="f1-2" value="2008" id="2008" />2008</label>
<label>
<input type="checkbox" name="f1-2" value="2009" id="2009" />2009</label>
<label>
<input type="checkbox" name="f1-2" value="2010" id="2010" />2010</label>
<label>
<input type="checkbox" name="f1-2" value="2011" id="2011" />2011</label>
<label>
<input type="checkbox" name="f1-2" value="2012" id="2012" />2012</label>
<label>
<input type="checkbox" name="f1-2" value="2013" id="2013" />2013</label>
<label>
<input type="checkbox" name="f1-2" value="2014" id="2014" />2014</label>
<label>
<input type="checkbox" name="f1-2" value="2015" id="2015" />2015</label>
<label>
<input type="checkbox" name="f1-2" value="2016" />2016</label>
</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>
最佳答案
您的选择器错误。
$checks = $(':checkbox[name^=fl]');
应该
$checks = $(':checkbox[name^=f1]');
Updated fiddle