Tengo varias casillas de verificación en un formulario y ya tengo un código que indica cuántos están marcados (consulte la función showChecked). Lo que estoy tratando de hacer ahora es contar cuántas casillas "nombradas" están marcadas. Por ejemplo, quiero saber de "chk011","chk021" y "chk033" cuántos de ellos están marcados, pero no me importa cuántos de los otros están o no (es decir, ignorar "chk001", " chk031" y "chk032"). Y luego devolver ese valor en un "resultado" diferente. Aquí está mi código actual...
<style> div.floater { position: -webkit-sticky; position: sticky; top: 0; left: 65%; width: 200px; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style> <script> showChecked(); function showChecked(){ document.getElementById("result").textContent = "Completed = " + ((document.querySelectorAll("input:checked").length/62)*100).toFixed(0) + '%'; } </script> </head> <body> <div class="floater"><p id="result" align="center">Completed = 0%</p></div> <input type="checkbox" name="chk001" onclick="changeColor(); showChecked()" <input type="checkbox" name="chk011" onclick="changeColor(); showChecked()" <input type="checkbox" name="chk021" onclick="changeColor(); showChecked()" <input type="checkbox" name="chk031" onclick="changeColor(); showChecked()" <input type="checkbox" name="chk032" onclick="changeColor(); showChecked()" <input type="checkbox" name="chk033" onclick="changeColor(); showChecked()"Puede almacenar los nombres que desea verificar en una matriz, luego, en su función, seleccione todas las entradas verificadas y use el filter para filtrar aquellas en las que la matriz de names no incluye su atributo de name , luego obtenga la longitud de la matriz resultante .
const named = ["chk011", "chk021", "chk033"] showChecked(); function showChecked() { document.getElementById("result").textContent = "Completed = " + ((document.querySelectorAll("input:checked").length / 62) * 100).toFixed(0) + '%'; const namedChecked = [...document.querySelectorAll("input:checked")].filter(e => named.includes(e.name)).length; console.log(namedChecked); } div.floater { position: -webkit-sticky; position: sticky; top: 0; left: 65%; width: 200px; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } <div class="floater"> <p id="result" align="center">Completed = 0%</p> </div> <input type="checkbox" name="chk001" onclick="showChecked()"> <input type="checkbox" name="chk011" onclick="showChecked()"> <input type="checkbox" name="chk021" onclick="showChecked()"> <input type="checkbox" name="chk031" onclick="showChecked()"> <input type="checkbox" name="chk032" onclick="showChecked()"> <input type="checkbox" name="chk033" onclick="showChecked()">