我正试图获得使用复选框筛选此列表的帮助
All li将在客户端选择任何筛选之前显示，如果客户端取消选择所有筛选，则返回该状态
如果选择了多个框，则将显示包含这些类别的每个li
类别在每个li中显示为h6跨度
<div class="tags">
<input id="artichoke" type="checkbox" name="artichoke" style="padding-left:40px;" value="artichoke">artichoke<br/>
<input id="arugula" type="checkbox" name="arugula" style="padding-left:40px;" value="arugula">arugula<br/>
<input id="asparagus" type="checkbox" name="asparagus" style="padding-left:40px;" value="asparagus">asparagus<br/>
<input id="beets" type="checkbox" name="beets" style="padding-left:40px;" value="beets">beets<br/>
<input id="broccoli" type="checkbox" name="broccoli" style="padding-left:40px;" value="broccoli">broccoli<br/>
<input id="brussels sprouts" type="checkbox" name="brussels sprouts" style="padding-left:40px;" value="brussels sprouts">brussels sprouts<br>
<input id="burdock" type="checkbox" name="burdock" style="padding-left:40px;" value="burdock">burdock<br/>
<input id="cabbage" type="checkbox" name="cabbage" style="padding-left:40px;" value="cabbage">cabbage<br/>
<input id="carrots" type="checkbox" name="carrots" style="padding-left:40px;" value="carrots">carrots<br/>
<input id="cauliflower" type="checkbox" name="cauliflower" style="padding-left:40px;" value="cauliflower">cauliflower<br/>
<input id="celery" type="checkbox" name="celery" style="padding-left:40px;" value="celery">celery<br/>
<input id="chinese greens" type="checkbox" name="chinese greens" style="padding-left:40px;" value="chinese greens">chinese greens<br>
<input id="collards" type="checkbox" name="collards" style="padding-left:40px;" value="collards">collards<br>
<input id="cucumbers" type="checkbox" name="cucumbers" style="padding-left:40px;" value="cucumbers">cucumbers<br/>
<input id="daikon" type="checkbox" name="daikon" style="padding-left:40px;" value="daikon">daikon
</div>
<ul>
<li>
<h2>My Second Listing</h2>
<h3>My Second Listing Tagline</h3>
<h6 class="buying">Buying: <span class="Foods">Foods ,</span></h6>
<h6 class="selling">
Selling: <span class="Foods ">
Foods ,</span> <span class="asparagus ">
asparagus ,</span> <span class="beets ">
beets ,</span> <span class="broccoli ">
broccoli ,</span> <span class="brussels sprouts ">
brussels sprouts ,</span> <span class="burdock ">
burdock ,</span> <span class="cabbage ">
cabbage ,</span> <span class="carrots ">
carrots ,</span> <span class="cauliflower ">
cauliflower ,</span> <span class="celery ">
celery ,</span> <span class="chinese greens ">
chinese greens ,</span> <span class="collards ">
collards ,</span> <span class="cucumbers ">
cucumbers ,</span> <span class="daikon ">
daikon ,</span> <span class="dry beans ">
dry beans ,</span>
</h6>
<a href="/ListingDetails.cshtml?id=18" class="btn-l link-processed purple">View Profile</a>
</li>
<li>
<h2>
My Third Listing</h2>
<h3>
My Third Listing Tagline</h3>
<h6 class="buying">
Buying: <span class="Foods ">
Foods ,</span> <span class="artichoke ">
artichoke ,</span> <span class="arugula ">
arugula ,</span> <span class="asparagus ">
asparagus ,</span> <span class="beets ">
beets ,</span> <span class="broccoli ">
broccoli ,</span> <span class="brussels sprouts ">
brussels sprouts ,</span> <span class="burdock ">
burdock ,</span> <span class="cabbage ">
cabbage ,</span> <span class="carrots ">
carrots ,</span> <span class="cauliflower ">
cauliflower ,</span> <span class="celery ">
celery ,</span> <span class="chinese greens ">
chinese greens ,</span> <span class="collards ">
collards ,</span> <span class="cucumbers ">
cucumbers ,</span> <span class="daikon ">
daikon ,</span>
<span class="dry beans ">
dry beans ,</span>
</h6>
<h6 class="selling">
Selling: <span class="Foods ">
Foods ,</span> <span class="arugula ">
arugula ,</span> <span class="asparagus ">
asparagus ,</span> <span class="beets ">
beets ,</span> <span class="broccoli ">
broccoli ,</span> <span class="brussels sprouts ">
brussels sprouts ,</span> <span class="burdock ">
burdock ,</span> <span class="cabbage ">
cabbage ,</span> <span class="carrots ">
carrots ,</span> <span class="cauliflower ">
cauliflower ,</span> <span class="celery ">
celery ,</span> <span class="chinese greens ">
chinese greens ,</span> <span class="collards ">
collards ,</span> <span class="cucumbers ">
cucumbers ,</span> <span class="daikon ">
daikon ,</span>
</h6>
<a href="/ListingDetails.cshtml?id=19" class="btn-l link-processed purple">View Profile</a>
</li>
我不确定我理解你的意思，因为你说你想让它们都显示出来，然后当他们点击复选框时，它会显示项目。。。。但如果他们已经开始如图所示，那么他们就不需要被展示了。
所以我反转了，当他们检查时，它会把它从列表中删除吗？但我不认为这是你想要的？
演示
$(document).ready(function(){
$(':checkbox').click(function(){
var val = $(this).val();
if($(this).is(':checked')){
$('span.'+val).show();
} else {$('span.'+val).hide();};
});
});
试试这个代码
var $inputs = $('input[type="checkbox"]');
$inputs.on('change', function() {
var allClasses = $inputs.map(function() {
return this.value;
}).get();
var $checkedInputs = $inputs.filter(function() {
return this.checked === true;
});
var checkedClasses = $checkedInputs.map(function() {
return this.value;
}).get();
var $uncheckedInputs = $inputs.filter(function() {
return this.checked === false;
});
// Show All initially
$('.' + allClasses.join(', .')).show();
// If unchecked not equal to total length invoke condition
if($inputs.length !== $uncheckedInputs.length) {
$('.' + allClasses.join(', .')).not($('.' + checkedClasses.join(', .'))).hide();
}
});
检查Fiddle
必须调整像dry beans、brussels sprouts和chinese greens这样的几个类，它们之间有一个-，因为它们意味着一个类。