JSFiddle - React, Tailwind, and code Playground

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>  <br>
<label for="test3"><input type="checkbox" id="test3" class="all_select">test3</label> <br>

JavaScript

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