Filter using multiple checkbox in 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.

Jay Blanchard · Accepted Answer · 2016-06-13 12:24:36Z

2

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>

edited Jun 13, 2016 at 12:24

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

answered Jun 11, 2016 at 17:23

Funk Forty Niner

74.2k14 gold badges71 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mimouni Over a year ago

okay. with this code in all times : checks have 'show()'. change it to hide() in else block.

PawelN · Accepted Answer · 2016-06-11 17:30:37Z

1

change checkboxes like this:

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

and then:

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

It isn't the best solution but it works ;) for improving quality of this code you should check visibility before using show or hide...

answered Jun 11, 2016 at 17:30

PawelN

3382 silver badges9 bronze badges

Comments

DJAy · Accepted Answer · 2016-06-11 19:17:05Z

0

On checkbox click check if any checkbox is checked or not. If any checkbox is checked then show filtered results else show all results.

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

answered Jun 11, 2016 at 19:17

DJAy

3201 silver badge9 bronze badges

Collectives™ on Stack Overflow

Filter using multiple checkbox in php

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related