Как сделать, чтобы снимался чекбокс?

143
13 декабря 2021, 00:30

Способ может показаться костыльным, вместо описанного используют радио-кнопки, но так требует ситуация. Как сделать, чтобы снимался чекбокс, при выборе соседнего, если они лежат в одном родителе?

<div class="parent-1"> 
  <input type="checkbox"> 
  <input type="checkbox"> 
  <input type="checkbox"> 
</div>

Answer 1

document.querySelectorAll('.parent-1 input[type="checkbox"]').forEach(item => { 
  item.addEventListener("change", function(e) { 
    if (this.checked) { 
      this.parentNode.querySelectorAll('input[type="checkbox"]').forEach(item => { 
        if (item != this) 
          item.checked = false; 
      }); 
    } 
  }); 
});
<div class="parent-1"> 
  <input type="checkbox"> 
  <input type="checkbox"> 
  <input type="checkbox"> 
</div>

document.querySelector('.parent-1').addEventListener("change", function(e) { 
  if (e.target.checked) { 
    this.querySelectorAll('input[type="checkbox"]').forEach(item => { 
      if (item != e.target) 
        item.checked = false; 
    }); 
  } 
});
<div class="parent-1"> 
  <input type="checkbox"> 
  <input type="checkbox"> 
  <input type="checkbox"> 
</div>

READ ALSO
Проблема с эмуляцией клика по кнопке Selenium, JS, Python, Chrome

Проблема с эмуляцией клика по кнопке Selenium, JS, Python, Chrome

Задача сэмулировать клик по кнопке «Проверено» на хитром UXbutton “Проверено» имеет свойство срабатывать при клике правой кнопкой мыши, как...

66
Как анимировать SVG с помощью ванильного JS?

Как анимировать SVG с помощью ванильного JS?

Только начал открывать для себя SVG изучая немногочисленные туториалыРазобрался, что существует три способа анимации: SMIL, CSS, JS

83
Группировка json

Группировка json

Не могли бы подсказатьУ меня несколько вопросов

115
Хранение секретных ключей в JS

Хранение секретных ключей в JS

Есть проблема: необходимо держать API ключ в Front-End JS, чтобы через код элемента никто его не узнал бы его, как это реализовать? Backend на Express, сам...

65