Quiero hacer un contador que muestre cuántas casillas de verificación hay en la lista de casillas de verificación en la página html. Mi código es el siguiente. El contador que muestro en HTML no está actualizado, ¿por qué?
Es posible que no pueda capturar el valor de la casilla de verificación en el bloque if.
var clicks = 0; function checkboxes() { var inputElems = document.getElementsByTagName("input"), for (var i = 0; i < inputElems.length; i++) { if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) { clicks += 1; document.getElementById("clicks").innerHTML = clicks; } else { clicks -= 1; document.getElementById("clicks").innerHTML = clicks; } } } <div class="addto-playlists"> <ol> <li> <label for="random-1" class="playlist-name"> <input id="random-1" type="checkbox" name="mycheckbox" value=578080> xxxx </label> </li> <li> <label for="random-1" class="playlist-name"> <input id="random-1" type="checkbox" name="mycheckbox" value=1234> xxxx </label> </li> <li> <label for="random-1" class="playlist-name"> <input id="random-1" type="checkbox" name="mycheckbox" value=567> xxxx </label> </li> </ol> </div> <p>clicks: <a id="clicks">0</a></p> document.getElementById("checkbox-list").addEventListener("click", checkboxes); function checkboxes() { var inputElems = document.getElementsByTagName("input"); var clicks = 0; for (var i = 0; i < inputElems.length; i++) { if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) { clicks += 1; } document.getElementById("clicks").innerHTML = clicks; } } <div class="addto-playlists"> <ol id="checkbox-list"> <li> <label for="random-1" class="playlist-name"> <input id="random-1" type="checkbox" name="mycheckbox" value=578080> xxxx </label> </li> <li> <label for="random-1" class="playlist-name"> <input id="random-2" type="checkbox" name="mycheckbox" value=1234> xxxx </label> </li> <li> <label for="random-1" class="playlist-name"> <input id="random-3" type="checkbox" name="mycheckbox" value=567> xxxx </label> </li> </ol> </div> <p>clicks: <a id="clicks">0</a></p>