Click div to uncheck to hide on results filter

Click div to uncheck to hide on results filter


We have form that have checkboxs with filter results

check it

http://jsfiddle.net/ag263ms9/

when uncheck input its values removed from search filter div,
But although we created div that clicked to uncheck checkbox

but filter result not effected

we need when click div it's do same effect like unchecked do

can you help

Jquery

  1. $(document).ready(function () { $(':checkbox').click(function() { if($(':checkbox:checked').length > 3){ alert('you can not check more than 3 checkboxes'); $(this).prop('checked',false); } }); }) ///// Filter Results $('div.tags').delegate('input[type=checkbox]', 'change', function() { var $lis = $('.results > li'), $checked = $('input:checked'); if ($checked.length) { var selector = $checked.map(function () { return '.' + $(this).attr('rel'); }).get().join(''); var $results = $lis.hide().filter(selector) ; if($results.length > 0) { $('.no-results-found').remove(); $results.show(); } else { $('.results').append('<li class="no-results-found">No results found.</li>'); } } else { $lis.show(); } //click to uncheck $('#sso').on('click', function (ev) { $("#aa").prop("checked", false); var $results = $lis.show().filter(selector) ; }); });      

HTML

  1. <div class="tags"> <label><input id="ss" type="checkbox" rel="arts" /> Arts </label> <label><input id="aa" 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> <p/><p/><hr/> <div id="sso">Click to uncheck #Computers</div> <p/><p/><hr/> <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> </ul>

Need your help