I am trying to filter using checkbox . but i have some problem . when i select the product category , i am getting the each category item but when i unselect all there arent any product . i want to do this if I unselect category item , i want to show all pruduct how can i do this ? help me please ?

<div class="tags">
        <label>
            <input type="checkbox" rel="arts" />
            Arts
        </label>
        <label>
            <input type="checkbox" rel="puters" />
            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 puters">Result 1</li>
        <li class="video-games">Result 2</li>
        <li class="puters health video-games">Result 3</li>
        <li class="arts video-games">Result 4</li>
    </ul>

jquery , ,

$(document).ready(function () {


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

You can view online with jsfiddle

/

I am trying to filter using checkbox . but i have some problem . when i select the product category , i am getting the each category item but when i unselect all there arent any product . i want to do this if I unselect category item , i want to show all pruduct how can i do this ? help me please ?

<div class="tags">
        <label>
            <input type="checkbox" rel="arts" />
            Arts
        </label>
        <label>
            <input type="checkbox" rel="puters" />
            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 puters">Result 1</li>
        <li class="video-games">Result 2</li>
        <li class="puters health video-games">Result 3</li>
        <li class="arts video-games">Result 4</li>
    </ul>

jquery , ,

$(document).ready(function () {


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

You can view online with jsfiddle

http://jsfiddle/neon38/56MvQ/2/

• javascript
• jquery
• html
• asp
• ajax

• .live is deprecated for .on – mplungjan Commented Jun 19, 2014 at 11:39
• jsfiddle/56MvQ/3 – Umesh Sehta Commented Jun 19, 2014 at 11:41

5 Answers 5

Updated Demo

Use .length to get the length of selected checkbox. If 0 show all li

if(!$('div.tags').find('input:checked').length){   //or .length == 0
    $('.results > li').show();
}

Try like this

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

Live Demo

also toggle('show') give it a nice effect

you Can just use Show() and hide() instead of toggle('show')

Put condition like this if($('div.tags').find('input:checked').length > 0)

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

Working Fiddle

try this Fiddle

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

you just need to check if any option is selected

try this....

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

    });
});