Как изменить класс блока переключением конкретной радиокнопки на JS

Question

Есть блок радиокнопок с id="delivery_1", delivery_2, delivery_3, etc. И есть отдельно блок с классом .delivery-list (по умолчанию скрыт). Задача - при активации радиобаттона с определённым id, например delivery_2, добавлять к классу .delivery-list класс .open (который проявляет блок) В js не силён, пока делаю так:

    document.getElementById("delivery_2").addEventListener("change", function() {
        document.querySelector('.delivery-list').classList.toggle('open');
    });

Но в этом случае логика срабатывает, только когда нажимаешь на эту кнопку (класс добавляется) и когда возвращаешься снова - пропадает (что логично). А нужно, чтобы когда уходил с этой кнопки (на любую другую, например .delivery_1), класс .open пропадал, а при возвращении - соответственно появлялся.

Answer 1

let rb = document.querySelectorAll('input');
let div = document.querySelectorAll('div');

function deleteClass() {
  for (let b of div) {
    b.classList.remove('open');
  }
}
rb.forEach((element, index) => {
  element.addEventListener('change', () => {
    deleteClass();
    div[index].classList.add('open')
  })
});

div {
  display: none;
}

div.open {
  display: block;
}

<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<input name="rb" type="radio" />
<input name="rb" type="radio" />
<input name="rb" type="radio" />
<input name="rb" type="radio" />

Answer 2

Спасибо. Получилось. Только у меня на странице много форм с инпутами, поэтому немного изменил:

let rb = document.querySelectorAll('input[name="delivery"]'); let dl = document.querySelectorAll('div.delivery-list');

Кстати, а вот если не привязываться к индексу, как можно менять разные классы? Т.е. нажимаем на радиокнопки и добавляется класс .open к вообще разным блокам на странице с разными классами, например div.delivery, section.checkout, etc.?

БЛОГ НА HUSL

Как изменить класс блока переключением конкретной радиокнопки на JS

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