Question

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

<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

<强> Updated Demo

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

Live Demo

也切换（'show'）给它一个很好的效果

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

Answer 3

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

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

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

Working Fiddle

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

    });
});

使用jquery ajax进行复选框过滤

5 个答案:

Live Demo