JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div id="checkbox_counter"><input type="hidden" name="category[]"  value="0">Select...</div></div>

<label for="all"><input type="checkbox" id="all" class="category_all">All</label>  <br>  
<label for="test1"><input type="checkbox" id="test1" class="all_select">test1</label> <br>
<label for="test2"><input type="checkbox" id="test2" class="all_select">test2</label>

JavaScript

$(function() {
    $("input[type=checkbox]").change(function() {
		var total_checked = $("input[type='checkbox']:checked").length;
		var all_list = $("input.category_all[type=checkbox]:checked").length;	
		
		if(total_checked > 0){
			if(all_list.length > 0){
				$('#checkbox_counter').replaceWith('<div id="checkbox_counter">All Selected</div>');
			}else{
				$('#checkbox_counter').replaceWith('<div id="checkbox_counter">'+total_checked+' Selected</div>');
			}			
		}else{
			$('#checkbox_counter').replaceWith('<div id="checkbox_counter">Select...</div>');
		}
     
		if ($(this).hasClass("category_all")) { 					
			$(".all_select").prop("checked", all_list).prop("disabled", all_list);      
		}
        
    });
});