Как при валидации радиокнопок добавлять а затем удалять класс у всех на странице?

Question

[Kardamon_mchl]

Прописал вот такой вот код, в котором проверяется, выбрана ли одна из радиокнопок и если не выбрана, то к ней добавляется класс еррор(радиокнопки делал через кастом: сама кнопка отключена, вместо выступает стилизовынный объект фейк). Но добавляется класс только первой кнопке на странице. Подскажите как добавлять класс всем радиокнопкам на странце и что бы потом при выборе из кнопок, этот класс удалялся?

form.onsubmit = function () {
	let inputRadio = document.querySelector('input[name="payment"]:checked'),
		radio = document.querySelector('.order__form-step.active .radio__fake');
	if (!inputRadio) {
		radio.classList.add('error');
		return false;
	} else {
		radio.addEventListener('click', function () {
			radio.classList.remove(error);
		});
	};
}

Comments

[Ankhena]

querySelector выбирает только первый элемент.
querySelectorAll выбирает все элементы, которые потом нужно перебирать в цикле.

Answer 1

[Айнур Ярулин]

Вроде так, почитай про querySelectorAll

let radios = document.querySelectorAll('.order__form-step.active .radio__fake') // получили ВСЕ радиокнопки

if (...) {
  radios.forEach(radio => radio.classList.add('error'))
} else {
  radio.forEach(radio => {
    radio.addEventListener('click', function (event) {
      event.target.classList.remove(error);
    });
  })
}

Comments

[Kardamon_mchl]

Большое спасибо, сработало как нужно, но только вот при выборе кнопки класс не удаляется, сам пытался как-то исправить, но тоже тщетно

[Айнур Ярулин]

Kardamon_mchl, у меня там ошибка, надо error в кавычки взять,
....classList.remove("error")

[Айнур Ярулин]

Kardamon_mchl, если помог, отметь решением

[Kardamon_mchl]

Айнур Ярулин, Нет, все равно, клик на кнопку не отслеживается вообще. Проверял удаление класса по функции onsubmit без отправки формы - работает, а по клику на саму радиокнопку ничего не происходит