set back counter to 0 if nothing is checked Javascript-CodePudding

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 onl oad="init()">
   <div  id="filter-manufacturer-707419086" style="">
    <ul >
        <li >
            <div >
                <input type="checkbox"  data-label="Dockers by Gerli" value="ba4fa0f5f0784bcfa485e359cbe92546" id="ba4fa0f5f0784bcfa485e359cbe92546">
                <label  for="ba4fa0f5f0784bcfa485e359cbe92546">Dockers by Gerli</label>
            </div>
        </li> 
        <li >
            <div >
                <input type="checkbox"  data-   label="Nike" value="d9e943a4c0c2419cbd87d5100d221236" id="d9e943a4c0c2419cbd87d5100d221236">
                <label  for="d9e943a4c0c2419cbd87d5100d221236">Nike</label>
            </div>
        </li>
    </ul>
    </div>
</body>

Any solution to the mentioned problems that I have is appreciated.

CodePudding user response：

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  id="filter-manufacturer-707419086" style="">
<ul >
    <li >
        <div >
            <input type="checkbox"  data-label="Dockers by Gerli" value="ba4fa0f5f0784bcfa485e359cbe92546" id="ba4fa0f5f0784bcfa485e359cbe92546">
            <label  for="ba4fa0f5f0784bcfa485e359cbe92546">Dockers by Gerli</label>
        </div>
    </li> 
    <li >
        <div >
            <input type="checkbox"  data-   label="Nike" value="d9e943a4c0c2419cbd87d5100d221236" id="d9e943a4c0c2419cbd87d5100d221236">
            <label  for="d9e943a4c0c2419cbd87d5100d221236">Nike</label>
        </div>
    </li>
</ul>
</div>

CodePudding user response：

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;

CodePudding user response：

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 onl oad="init()">
  <div  id="filter-manufacturer-707419086" style="">
    <ul >
      <li >
        <div >
          <input type="checkbox"  data-label="Dockers by Gerli" value="ba4fa0f5f0784bcfa485e359cbe92546" id="ba4fa0f5f0784bcfa485e359cbe92546">
          <label  for="ba4fa0f5f0784bcfa485e359cbe92546">Dockers by Gerli</label>
        </div>
      </li>
      <li >
        <div >
          <input type="checkbox"  data- label="Nike" value="d9e943a4c0c2419cbd87d5100d221236" id="d9e943a4c0c2419cbd87d5100d221236">
          <label  for="d9e943a4c0c2419cbd87d5100d221236">Nike</label>
        </div>
      </li>
    </ul>
  </div>
</body>