Question

我正在尝试使用复选框来帮助过滤此列表。

所有li将在客户端选择任何过滤之前显示并返回到该状态（如果客户端取消选择所有过滤器。

如果选择了多个框，则将显示包含这些类别的每个li。

类别在每个li中显示为h6 span

<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>

Answer 1

我不确定我明白你的意思，因为你说你希望他们全部显示，然后当他们点击复选框时它会显示项目....但如果他们已经开始如图所示，那么他们不会需要被展示。

所以我逆转了，当他们检查时，它会把它从列表中删除？但我不认为那就是你想要的？

DEMO

$(document).ready(function(){

$(':checkbox').click(function(){
var val = $(this).val();
 if($(this).is(':checked')){
 $('span.'+val).show();
} else {$('span.'+val).hide();};
});

});

Answer 2

试试此代码

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

<强> Check Fiddle

必须调整几个类，例如dry beans，brussels sprouts和chinese greens，其间有-，因为它们意味着单个类。

使用复选框jquery </li>过滤<li>列表的最简单方法

2 个答案: