Number of checked checkboxes

How to rewrite this code? I need to see how many checkboxes are checked. The problem is I do not know how to remove unchecked checkboxes from the total score.

    $(function () {

        var countChecked = function () {
            var n = $("input:checked").length;
            $(".output").text(n);
        };
        countChecked();

        $("input[type=checkbox]").on("click", countChecked);

    });

What should I do next?

   var box = document.querySelectorAll('form input');
   var par = document.querySelector('.output');
   var great = 0;
   for (var i = 0; i < box.length; i++) {
   box[i].addEventListener('click', countIt);
   function countIt() {
   for (var i = 0; i < box.length; i++) {
   if ( box[i].checked ) {
    great++
    par.innerHTML = great;
    return
   }
  }
 }
}