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

时间:2013-08-04 06:05:50

标签: jquery map checkbox filtering

  • 我正在尝试使用复选框来帮助过滤此列表。
  • 所有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>
    

  • 2 个答案:

    答案 0 :(得分:0)

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

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

    DEMO

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

    答案 1 :(得分: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();
        }
    });
    

    <强> Check Fiddle

    必须调整几个类,例如dry beansbrussels sproutschinese greens,其间有-,因为它们意味着单个类。