Simply we have form that have 4 checkboxs with filter results (hide values when checked) check it in new fiddle http://jsfiddle.net/ag263ms9/1/ if you checked Computers checkbox it will filter and hide its results ( Result 2, Result 4) to be ------- Result 1 Result 3 -------- then if unchecked, it will show its results again to be ------- Result 1 Result 2 Result 3 Result 4 >>simply need click div #Computers to uncheck and do same uncheck effects (hide its results) can you help Jquery $(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 <divclass="tags"><label><inputid="ss"type="checkbox"rel="arts"/> Arts </label><label><inputid="aa"type="checkbox"rel="computers"/> Computers </label><label><inputtype="checkbox"rel="health"/> Health </label><label><inputtype="checkbox"rel="video-games"/> Video Games </label></div><p/><p/><hr/><divid="sso">Click to uncheck #Computers</div><p/><p/><hr/> <ulclass="results"><liclass="arts computers"> Result 1 </li><liclass="video-games"> Result 2 </li><liclass="computers health video-games"> Result 3 </li><liclass="arts video-games"> Result 4 </li></ul>
Replace this line: $("#aa").prop("checked", false); Code (markup): By: $("#aa").prop("checked", false).change(); Code (markup): I hope be useful it