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.
JavaScript
x
22
22
1
function init() {
2
var elements = document.getElementsByClassName("filter-multi-select-list-item");
3
4
var myFunction = function () {
5
var inputElems = document.getElementsByTagName("input"),
6
count = 0;
7
for (var ii = 0; ii < inputElems.length; ii++) {
8
if (inputElems[ii].type === "checkbox" && inputElems[ii].checked === true) {
9
count++;
10
console.log(count);
11
if (count === 1){
12
console.log("show logo");
13
}else{
14
console.log("hide logo");
15
}
16
}
17
}}
18
19
for (var i = 0; i < elements.length; i++) {
20
elements[i].addEventListener('click', myFunction, false);
21
}
22
}
JavaScript
1
18
18
1
<body onload="init()">
2
<div class="filter-multi-select-dropdown filter-panel-item-dropdown collapse show" id="filter-manufacturer-707419086" style="">
3
<ul class="filter-multi-select-list">
4
<li class="filter-multi-select-list-item">
5
<div class="custom-control custom-checkbox">
6
<input type="checkbox" class="custom-control-input filter-multi-select-checkbox" data-label="Dockers by Gerli" value="ba4fa0f5f0784bcfa485e359cbe92546" id="ba4fa0f5f0784bcfa485e359cbe92546">
7
<label class="filter-multi-select-item-label custom-control-label" for="ba4fa0f5f0784bcfa485e359cbe92546">Dockers by Gerli</label>
8
</div>
9
</li>
10
<li class="filter-multi-select-list-item">
11
<div class="custom-control custom-checkbox">
12
<input type="checkbox" class="custom-control-input filter-multi-select-checkbox" data- label="Nike" value="d9e943a4c0c2419cbd87d5100d221236" id="d9e943a4c0c2419cbd87d5100d221236">
13
<label class="filter-multi-select-item-label custom-control-label" for="d9e943a4c0c2419cbd87d5100d221236">Nike</label>
14
</div>
15
</li>
16
</ul>
17
</div>
18
</body>
Any solution to the mentioned problems that I have is appreciated.
Advertisement
Answer
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 not1
:
JavaScript
1
5
1
var inputElems = document.getElementsByTagName("input");
2
var checked = [ inputElems ].filter(e => e.checked).length;
3
var hideLogo = checked !== 1;
4
console.log('Should hide logo: ', hideLogo);
5
JavaScript
1
12
12
1
var elements = document.getElementsByClassName("filter-multi-select-list-item");
2
3
var myFunction = function () {
4
var inputElems = document.getElementsByTagName("input");
5
var checked = [ inputElems ].filter(e => e.checked).length;
6
var hideLogo = checked === 0 || checked > 1;
7
console.log('Should hide logo: ', hideLogo);
8
}
9
10
for (var i = 0; i < elements.length; i++) {
11
elements[i].addEventListener('click', myFunction, false);
12
}
JavaScript
1
16
16
1
<div class="filter-multi-select-dropdown filter-panel-item-dropdown collapse show" id="filter-manufacturer-707419086" style="">
2
<ul class="filter-multi-select-list">
3
<li class="filter-multi-select-list-item">
4
<div class="custom-control custom-checkbox">
5
<input type="checkbox" class="custom-control-input filter-multi-select-checkbox" data-label="Dockers by Gerli" value="ba4fa0f5f0784bcfa485e359cbe92546" id="ba4fa0f5f0784bcfa485e359cbe92546">
6
<label class="filter-multi-select-item-label custom-control-label" for="ba4fa0f5f0784bcfa485e359cbe92546">Dockers by Gerli</label>
7
</div>
8
</li>
9
<li class="filter-multi-select-list-item">
10
<div class="custom-control custom-checkbox">
11
<input type="checkbox" class="custom-control-input filter-multi-select-checkbox" data- label="Nike" value="d9e943a4c0c2419cbd87d5100d221236" id="d9e943a4c0c2419cbd87d5100d221236">
12
<label class="filter-multi-select-item-label custom-control-label" for="d9e943a4c0c2419cbd87d5100d221236">Nike</label>
13
</div>
14
</li>
15
</ul>
16
</div>