Anzahl der aktivierten Kontrollkästchen

Question

Wie umschreiben Sie diesen Code von jQuery nach Vanille JavaScript? Ich muss sehen, wie viele Kontrollkästchen aktiviert sind. Das Problem ist, dass ich nicht weiß, wie man nicht markierte Checkboxen aus der Gesamtpunktzahl entfernt.

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

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

Was soll ich als nächstes tun?

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 
      } 
     } 
    } 
} 

Answer 1

Sie benötigen die great Variable jedes Mal, wenn Sie zählen zum Zurücksetzen (zum Beispiel, indem sie es in der countIt Funktion bewegt).

var box = document.querySelectorAll('form input'); 
var par = document.querySelector('.output'); 

function countIt() { 
    var great = 0; 
    for (var i = 0; i < box.length; i++) { 
     if (box[i].checked) { 
      great++; 
     } 
    } 

    par.innerHTML = great; 
} 

for (var i = 0; i < box.length; i++) { 
    box[i].addEventListener('click', countIt); 
} 

können Sie auch mit innerHTML Einstellung aus der Schleife und derselben die countIt Funktionsdefinition bewegen.