set back counter to 0 if nothing is checked Javascript

March 31, 2022

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.

>Solution :

We can use filter() on the nodelist to get only the <input>‘s that are checked.

Then we can simplify the condition to:

Hide logo the amount of checked <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>