Как стилизовать только выбранную радиокнопку?

Question

[Владислав]

Есть скрипт викторины на чистом JS, в котором хотелось бы выделять выбранный ответ (радиокнопка и её label). Пробовал делать это, добавляя класс нажатому ответу, но если нажать все варианты по очереди, то класс добавится всем.

event.target.closest('label').classList.add('checked');

Можно ли как-то при смене выбранного ответа убирать класс с тех, что были нажаты ранее?

Comments

[archelon]

а вариант использовать псевдокласс checked не подходит?
https://developer.mozilla.org/ru/docs/Web/CSS/:checked

Answer 1

[imko]

Или ты можешь не городить избыточной фигни и обойтись исключительно небольшим количеством стилей. Примерно вот так

Answer 2

[Spark108]

Если к одному вопросу 1 ответ, то сохраняй таргет выбранного ответа в переменную, а когда нажимают другой ответ, то смотри в переменную. Если там кто-то есть, то убери с него все ненужные висяки и запиши в переменную новый таргет.

Если много ответов к 1 вопросу, то массив и идентификация в помощь..

UPD: А еще можешь если 1 к 1, то пролетись по всем элементам, убери с них лишнее, а таргету поставь нужное.

Comments

[Владислав]

Судя по всему помог второй вариант. Спасибо!

let answersList = document.querySelectorAll('.answer-input');
answersList.forEach(element => {
			if (!element.closest('label').classList.contains('checked') && element.checked) element.closest('label').classList.add('checked');
			else element.closest('label').classList.remove('checked');
});