使用jquery ajax筛选复选框

Checkbox filtering using jquery ajax

本文关键字：复选框 筛选 ajax jquery 使用      更新时间：2023-09-26

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

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

更新演示

使用 .length 获取选中复选框的长度。如果0显示所有li 

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

试一下

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

现场演示

also toggle('show')给它一个漂亮的效果

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

像这样放置条件 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();
                    }
                });
            });
工作小提琴

试试这个

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

你只需要检查是否有选项被选中

试试这个....

$(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();                    
        }
    });
});
相关文章：