使用复选框 jquery 过滤 <a> 列表的最简单方法答案

【问题标题】：Easiest way to filter <li> list using check box jquery使用复选框 jquery 过滤 <a> 列表的最简单方法
【发布时间】：2013-08-04 14:38:17
【问题描述】：

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

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

【问题讨论】：

标签： jquery map checkbox filtering

【解决方案1】：

我不确定我是否理解您的意思，因为您说您希望它们全部显示，然后当他们单击复选框时，它将显示该项目....但是如果它们已经如图所示开始，那么它们就不会需要显示。

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

DEMO

$(document).ready(function(){

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

});

【讨论】：

kylek...如果复选框被选中并且
包含该类别，那么我希望整个
显示并让其他
不包含该项目隐藏。

【解决方案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，在它们之间加上 -，因为它们意味着一个类。

【讨论】：

Sushanth，这看起来不错，运行良好，我可能没有解释清楚，如果用户选择干豆，那么我希望所有不包含干豆的
都隐藏，如果你取消点击 Dry Beans 那么所有
都会重新出现...这有意义吗

@sburns.. 我想如果你只选择干豆 li 干豆类显示正确

没错，它只显示干豆，但我希望它会显示整个

的所有类别，而不是隐藏其余有干豆的类别并隐藏任何整个

不含干豆

但是在不同的 li 之间存在一些关系，以便正确地发生这种情况。否则代码怎么知道那些不应该被隐藏。例如，如果您检查甜菜，它只播种甜菜，因为 li 具有条件类

如果 ul 中的任何其他 li 没有甜菜，那么隐藏那些 li 就是我正在寻找的大插件....我想隐藏任何没有该类别的 li 并显示我就是这样做的