Скрыть кнопку, если нажат чекбокс

Question

Есть проблема: есть три чекбокса и кнопка, нужно скрывать кнопку, если хотя бы один чекбокс в состоянии checked и когда все чекбоксы не в состоянии checked, то только тогда показывать кнопку, тоесть: если два в чеккед, то кнопка должна быть скрыта и если один в чеккед то тоже скрыта, только когда ноль чекбоксов с чеккед. У меня это работает криво, если у меня три чекбокса в чеккед и у одного уберу чеккед, то кнопка почему-то показывается (скажите пожалуйста решение без использования General sibling combinator)

HTML:

<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<button class="btn">
    click
</button>

JS:

window.addEventListener('load', function() {
let checkbox = document.querySelectorAll('.checkbox');
let btn = document.querySelector('.btn');
for(let i = 0; i < checkbox.length; i++) {
    let checkboxes = checkbox[i];
    checkboxes.addEventListener('change', function() {
        if(checkboxes.checked > 0) {
            btn.style.display = 'none';
        } else {
            btn.style.display = 'inline';
        }
    });
}

});

Answer 1

можно просто на css сделать, используя General sibling combinator

button { display:block }

input.checkbox:checked ~ button {display:none}

<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<button class="btn">
    click
</button>

Answer 2

Если нужен вариант на JS:

window.addEventListener('load', function() {
  let btn = document.querySelector('.btn');
  document.addEventListener('change', fCheck);

  function fCheck() {
    btn.style.display = document.querySelectorAll('.checkbox:checked').length ? 'none' : 'inline';
  }
});

<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<button class="btn">
    click
</button>

БЛОГ НА HUSL

Скрыть кнопку, если нажат чекбокс

Ответы (2 шт):