Javascript 使用jqueryajax进行复选框过滤

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

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

您可以使用JSFIDLE联机查看

试试这个

---

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

像这样放置条件

if（$（'div.tags'）.find（'input:checked'）.length>0）

使用获取选中复选框的长度。如果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();
        }
    });
});

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

您可以使用Show（）和hide（）来代替切换（'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();                    
        }

    });
});      

---

.live不推荐用于。onI更喜欢==0！在答案中添加了您的建议。除了切换（“显示”）将不会像您在最后一个选项中预期的那样工作show@mplungjanokzz我刚刚检查了你是否可以使用show（300）在上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个上一个的效果，我？

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

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

    });
});