I have multiple dropdowns that contain checkboxes and my goal is "on click" to check how many boxes are checked and if it's more than 1 to hide a logo.
I have 2 Problems.
Problem 1:
The counter never sets to 0 if no check box is checked.
Problem 2:
Every time I click it runs through the function multiple times and I end up getting multiple console.logs which is bad and confusing.
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>Any solution to the mentioned problems that I have is appreciated.
You can set the count globally and only listen to the element you clicked. You don't need to go through all the elements to check the count again
The count will be updated according to every click on 1 element
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>We can use filter() on the nodelist to get only the <input>'s that are checked.
Then we can simplify the condition to:
<input>'s is not 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>You could use a querySelectorAll which returned all checked checkboxes, and look at the length property.
var count = document.querySelectorAll("input[type='checkbox']:checked").length;