使用jQuery Ajax进行复选框过滤

Question

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

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

Answer 1

更新的演示

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

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

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

现场演示

同时切换（'显示'）给它一个不错的效果

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

Answer 3

试试这个小提琴

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

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

Answer 4

像这样放置条件 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();
                    }
                });
            });  

工作小提琴

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

    });
});