在php中使用多个复选框进行过滤答案

【问题标题】：Filter using multiple checkbox in php在php中使用多个复选框进行过滤
【发布时间】：2016-10-12 11:30:34
【问题描述】：

我需要使用 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> 的内容都会隐藏。相反，如果我在取消选择后取消选择所有复选框，我需要显示所有内容。

【问题讨论】：

标签： php jquery filter

【解决方案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>

【讨论】：

好的。始终使用此代码：检查有'show（）'。在 else 块中将其更改为 hide()。

【解决方案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 之前检查可见性...

【讨论】：

【解决方案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>

【讨论】：