I have a list with checkboxes, and i need so when one is selected -> it selects one specific checkbox. The code i got only works once.
let checkbox = document.querySelectorAll('.filter__check'); //All the checkboxes
let available = document.querySelector('[name="filter.v.availability"]'); // One that i need be checked
for (let i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function(){
if(checkbox[i].name != "filter.v.availability" && available.checked == false) {
available.checked = true;
}
}
}
Can't understand why it only applies on first click.
I think using the change event would fit better here.
Also make sure you check if the clicked box is checked so that it wont run when a box is deselected.
let checkbox = document.querySelectorAll('.filter__check'); //All the checkboxes
let available = document.querySelector('[name="filter.v.availability"]'); // One that i need be checked
for (let i = 0; i < checkbox.length; i++) {
checkbox[i].onchange = function() {
if(checkbox[i].name !== "filter.v.availability" && checkbox[i].checked) {
available.checked = true;
}
}
}
<ol>
<li><input type="checkbox" class="filter__check"></li>
<li><input type="checkbox" class="filter__check"></li>
<li><input type="checkbox" class="filter__check"></li>
<li><input type="checkbox" class="filter__check"></li>
</ol>
<input type="checkbox" class="filter__check" name="filter.v.availability">