Question

我需要使用jquery过滤内容，但如果没有选中复选框，我需要显示所有内容。

这是我的代码：

     <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>
    <li class="arts video-games">Result 6</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script>

$(document).ready(function () {
        $('.results > li').show();

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

onload它显示所有内容。但是，如果我取消选中所有复选框，则所有<li>的内容都会隐藏。相反，如果在取消选择后取消选中所有复选框，我需要显示所有内容。

Answer 1

在您的所有复选框checks中添加class="checks"课程，然后您可以使用if/else条件语句，同时使用.change()和.show()。

即：<input type="checkbox" rel="arts" class="checks" />等。

注意：我不是JS大师，但是在现有<script>...</script>下添加以下内容将会实现您想要实现的目标。

<script type="text/javascript">

$('.checks').change(function(){
    if(this.checked) {

    $('.checks').show();

}

else{
    $('.checks').hide();
}

});

</script>

Answer 2

更改复选框，如下所示：

<input type="checkbox" data-type="computers" />

然后：

$('.tag checkbox').on('change', function() {
  chckbxType = $(this).data('type');
  $('.results li').each(function() {
      $(this).hasClass(chckbxType) ? $(this).show() :  $(this).hide();
  }
}

这不是最佳解决方案，但它有效;）为了提高此代码的质量，您应该在使用show或hide之前检查可见性...

Answer 3

点击checkbox点击检查是否选中了checkbox。如果选中checkbox，则显示已过滤的结果，否则显示所有结果。

<script>

$(document).ready(function () {

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

});      
</script>

在php中使用多个复选框过滤

3 个答案: