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

Question

I need to filter the contents by using jquery but I need to display all contents if no checkbox is selected.

Here is my code:

     <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 it shows all contents. But if I deselect all checkboxes, all <li>'s content are hiding. Instead, I need to show all content if I deselect all checkboxes after deselection.

Answer 1

Add a checks class to all your checkboxes class="checks" then you can use an if/else conditional statement, while using .change() and .show().

I.e.: <input type="checkbox" rel="arts" class="checks" /> etc.

Note: I'm not a JS guru, but the following addition to be placed under your existing <script>...</script> will do what you want to achieve.

<script type="text/javascript">

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

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

}

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

});

</script>