<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>
问问题
363 次
2 回答
0
Im not sure I understand what you mean, cause you say you want them all to show, then when they click checkbox it will show the item....but if they're already starting out as shown, then they dont need to be shown.
So I reversed, and when they check, it takes it off the list? But I dont think thats what you want?
$(document).ready(function(){
$(':checkbox').click(function(){
var val = $(this).val();
if($(this).is(':checked')){
$('span.'+val).show();
} else {$('span.'+val).hide();};
});
});
于 2013-08-04T06:26:14.123 回答
0
试试这个代码
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();
}
});
不得不调整几个类，比如dry beans,brussels sprouts并在它们之间chinese greens加上 a -，因为它们意味着一个类。
于 2013-08-04T06:38:17.543 回答