Tengo varios menús desplegables que contienen casillas de verificación y mi objetivo es "al hacer clic" para verificar cuántas casillas están marcadas y si es más de 1 para ocultar un logotipo.
Tengo 2 Problemas.
Problema 1:
El contador nunca se establece en 0 si no se marca ninguna casilla de verificación.
Problema 2:
Cada vez que hago clic, ejecuta la función varias veces y termino obteniendo varios registros de consola, lo cual es malo y confuso.
function init() { var elements = document.getElementsByClassName("filter-multi-select-list-item"); var myFunction = function () { var inputElems = document.getElementsByTagName("input"), count = 0; for (var ii = 0; ii < inputElems.length; ii++) { if (inputElems[ii].type === "checkbox" && inputElems[ii].checked === true) { count++; console.log(count); if (count === 1){ console.log("show logo"); }else{ console.log("hide logo"); } } }} for (var i = 0; i < elements.length; i++) { elements[i].addEventListener('click', myFunction, false); } } <body onload="init()"> <div class="filter-multi-select-dropdown filter-panel-item-dropdown collapse show" id="filter-manufacturer-707419086" style=""> <ul class="filter-multi-select-list"> <li class="filter-multi-select-list-item"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input filter-multi-select-checkbox" data-label="Dockers by Gerli" value="ba4fa0f5f0784bcfa485e359cbe92546" id="ba4fa0f5f0784bcfa485e359cbe92546"> <label class="filter-multi-select-item-label custom-control-label" for="ba4fa0f5f0784bcfa485e359cbe92546">Dockers by Gerli</label> </div> </li> <li class="filter-multi-select-list-item"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input filter-multi-select-checkbox" data- label="Nike" value="d9e943a4c0c2419cbd87d5100d221236" id="d9e943a4c0c2419cbd87d5100d221236"> <label class="filter-multi-select-item-label custom-control-label" for="d9e943a4c0c2419cbd87d5100d221236">Nike</label> </div> </li> </ul> </div> </body>Se agradece cualquier solución a los problemas mencionados que tengo.
Puede configurar el count globalmente y solo escuchar el elemento en el que hizo clic. No necesita revisar todos los elementos para verificar el conteo nuevamente
El recuento se actualizará de acuerdo con cada clic en 1 elemento
function init() { var elements = document.getElementsByClassName("filter-multi-select-list-item"); var count = 0; var myFunction = function(event) { //only check the current clicked checkbox if (event.target.checked) { count++; //if it's ticked, we increase the count } else { count--; //if it's unticked, we decrease the count } console.log(count); if (count === 1) { console.log("show logo"); } else { console.log("hide logo"); } } for (var i = 0; i < elements.length; i++) { elements[i].addEventListener('click', myFunction, false); } } <body onload="init()"> <div class="filter-multi-select-dropdown filter-panel-item-dropdown collapse show" id="filter-manufacturer-707419086" style=""> <ul class="filter-multi-select-list"> <li class="filter-multi-select-list-item"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input filter-multi-select-checkbox" data-label="Dockers by Gerli" value="ba4fa0f5f0784bcfa485e359cbe92546" id="ba4fa0f5f0784bcfa485e359cbe92546"> <label class="filter-multi-select-item-label custom-control-label" for="ba4fa0f5f0784bcfa485e359cbe92546">Dockers by Gerli</label> </div> </li> <li class="filter-multi-select-list-item"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input filter-multi-select-checkbox" data- label="Nike" value="d9e943a4c0c2419cbd87d5100d221236" id="d9e943a4c0c2419cbd87d5100d221236"> <label class="filter-multi-select-item-label custom-control-label" for="d9e943a4c0c2419cbd87d5100d221236">Nike</label> </div> </li> </ul> </div> </body>Podemos usar filter() en la lista de nodos para obtener solo los <input> que están marcados.
Entonces podemos simplificar la condición a:
<input> marcados no es 1 : var inputElems = document.getElementsByTagName("input"); var checked = [ ...inputElems ].filter(e => e.checked).length; var hideLogo = checked !== 1; console.log('Should hide logo: ', hideLogo); var elements = document.getElementsByClassName("filter-multi-select-list-item"); var myFunction = function () { var inputElems = document.getElementsByTagName("input"); var checked = [ ...inputElems ].filter(e => e.checked).length; var hideLogo = checked === 0 || checked > 1; console.log('Should hide logo: ', hideLogo); } for (var i = 0; i < elements.length; i++) { elements[i].addEventListener('click', myFunction, false); } <div class="filter-multi-select-dropdown filter-panel-item-dropdown collapse show" id="filter-manufacturer-707419086" style=""> <ul class="filter-multi-select-list"> <li class="filter-multi-select-list-item"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input filter-multi-select-checkbox" data-label="Dockers by Gerli" value="ba4fa0f5f0784bcfa485e359cbe92546" id="ba4fa0f5f0784bcfa485e359cbe92546"> <label class="filter-multi-select-item-label custom-control-label" for="ba4fa0f5f0784bcfa485e359cbe92546">Dockers by Gerli</label> </div> </li> <li class="filter-multi-select-list-item"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input filter-multi-select-checkbox" data- label="Nike" value="d9e943a4c0c2419cbd87d5100d221236" id="d9e943a4c0c2419cbd87d5100d221236"> <label class="filter-multi-select-item-label custom-control-label" for="d9e943a4c0c2419cbd87d5100d221236">Nike</label> </div> </li> </ul> </div>Podría usar un querySelectorAll que devolviera todas las casillas de verificación marcadas y observar la propiedad de longitud.
var count = document.querySelectorAll("input[type='checkbox']:checked").length;