使用 jquery ajax 进行复选框过滤答案

【问题标题】：Checkbox filtering using jquery ajax使用 jquery ajax 进行复选框过滤
【发布时间】：2016-07-30 15:22:27
【问题描述】：

我正在尝试使用复选框进行过滤。但我有一些问题。当我选择产品类别时，我得到了每个类别的项目，但是当我取消选择所有产品时，没有任何产品。如果我取消选择类别项目，我想这样做，我想显示所有产品我该怎么做？请帮帮我？

<div class="tags">
        <label>
            <input type="checkbox" rel="arts" />
            Arts
        </label>
        <label>
            <input type="checkbox" rel="computers" />
            Computers
        </label>
        <label>
            <input type="checkbox" rel="health" />
            Health
        </label>
        <label>
            <input type="checkbox" rel="video-games" />
            Video Games
        </label>
    </div>
    <ul class="results">
        <li class="arts computers">Result 1</li>
        <li class="video-games">Result 2</li>
        <li class="computers health video-games">Result 3</li>
        <li class="arts video-games">Result 4</li>
    </ul>

jquery , ,

$(document).ready(function () {


            $('div.tags').find('input:checkbox').live('click', function () {
                $('.results > li').hide();
                $('div.tags').find('input:checked').each(function () {
                    $('.results > li.' + $(this).attr('rel')).show();
                });
            });
        });

可以用jsfiddle在线查看

http://jsfiddle.net/neon38/56MvQ/2/

【问题讨论】：

.live 已被 .on 弃用
jsfiddle.net/56MvQ/3

标签： javascript jquery html asp.net ajax

【解决方案1】：

Updated Demo

使用 .length 获取选中复选框的长度。如果为0则显示全部li

if(!$('div.tags').find('input:checked').length){   //or .length == 0
    $('.results > li').show();
}

【讨论】：

我更喜欢 ==0 到 !
将您的建议添加到答案中。

【解决方案2】：

这样试试

$(document).ready(function () {
    $('div.tags').find('input:checkbox').live('click', function () {
        if ($(this).prop("checked")) {
            $('.results > li').toggle('show');
            $('div.tags').find('input:checked').each(function () {
                $('.results > li.' + $(this).attr('rel')).toggle('show');
            });
        } else{
           $('.results > li').show();
        }
    });
});

Live Demo

toggle('show') 也给它一个很好的效果

you Can just use Show() and hide() instead of toggle('show')

【讨论】：

除了 toggle("show") 不会像上一场演出那样工作
@mplungjan okzz 我只是在检查
你可以使用 show(300) 在最后一个上达到同样的效果

【解决方案3】：

这样写条件 if($('div.tags').find('input:checked').length > 0)

$(document).ready(function () {
          $('div.tags').find('input:checkbox').live('click', function () {
                    $('.results > li').hide();
                    if($('div.tags').find('input:checked').length > 0){
                    $('div.tags').find('input:checked').each(function () {
                        $('.results > li.' + $(this).attr('rel')).show();
                    });
                    }
                    else{
                        $('.results > li').show();
                    }
                });
            });

Working Fiddle

【讨论】：

【解决方案4】：

试试这个Fiddle

  $(document).ready(function () {    
        $('div.tags').find('input:checkbox').live('click', function () {
            $('.results > li').hide();
            if( $('div.tags').find('input:checked').length > 0)
            {
            $('div.tags').find('input:checked').each(function () {
                $('.results > li.' + $(this).attr('rel')).show();
            });
            }else
                {
                  $('.results > li').show();
                }
          });
     });

您只需要检查是否选择了任何选项

【讨论】：

我怎样才能为这段代码添加加载img图标面板？

【解决方案5】：

试试这个....

$(document).ready(function () {
  $('div.tags').find('input:checkbox').live('click', function () {

     var count=0; 
     $('.results > li').hide(); 

     $('div.tags').find('input:checked').each(function () {
        $('.results > li.' + $(this).attr('rel')).show();
              count=1;
        });
        if(count == 0)
        {
            $('.results > li').show();                    
        }

    });
});

【讨论】：