Demo of counting total checkboxes by using class and on change event


One
Two
Three
Four
Five

Check and uncheck the checkboxes to show total number of selected checkboxes


DEMO Reading value of selected checkboxes Limiting number of checkboxes selected

JQuery

<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function(){
var total_checked=  $("input[type='checkbox']:checked").length 
$("#d1").html("Total Number of checkbox checked  = " + total_checked );
});
/////////////
var total_checked=  $("input[type='checkbox']:checked").length 
$("#d1").html("Total Number of checkbox checked  = " + total_checked );
///////
});
</script>

HTML

<input type=checkbox id='ckb1' value=One> One <br>
<input type=checkbox id='ckb2' value=Two> Two <br>
<input type=checkbox id='ckb3' value=Three> Three <br>
<input type=checkbox id='ckb4' value=Four> Four <br>
<input type=checkbox id='ckb5' value=Five> Five <br>

<button type='button' class='btn btn-secondary'  id=d1></button>