//Jquery Code $('.checkbox-wrapper').delegate('input:checkbox', 'change', function() { var $lis = $('.blog-list > .post').hide(); $('.checkbox-wrapper #all').prop('checked', false); //For each one checked $('input:checked').each(function() { // $('.checkbox-wrapper #all').prop('checked', false); $lis.filter('.' + $(this).attr('rel')).show(); }); if ($(".checkbox-wrapper input:checkbox:checked").length > 0) { $('.checkbox-wrapper #all').prop('checked', false); } else { $('.checkbox-wrapper #all').prop('checked', true); $('.blog-list > .post').show(); } }); //Checkbox group <ul class="checkbox-wrapper"> <li><input class="form-check-input me-1" type="checkbox" rel="all" id="all" checked> <label class="form-check-label">All Blogs</label> </li> <li><label class="form-check-label" for="blogCategory1"> <input class="form-check-input me-1 1" type="checkbox" rel="analytics">Analytics</label> </li> </ul> //blog List <div class="blog-list"> <div class="post col mb-4 all analytics"><h1>Blog Title</h1></div> <div class="post col mb-4 all BDA"><h1>BDA</h1></div> </div>