Как сделать(стилизовать) несколько элементов с множественным выбором?

Question

[Даниил Архипов]

Как сделать(стилизовать), чтобы только на данной странице https://www.angar.tech/quiz/?PAGEN=9 был не один выбор, а несколько?

Нажал на один вариант ответа https://skr.sh/sGwKicLrq93
Нажимаю на другой вариант, и выделение первого элемента исчезает https://skr.sh/sGwVLn5oqRG
Нужно сделать так, чтобы не исчезал. или исчезал при клике на него же)
Помогитееее))

Answer 1

[Rsa97]

Использовать не radio, а checkbox.

Comments

[Даниил Архипов]

Заменил у input type с radio на checkbox и ничего(

[Сергей delphinpro]

darkhipov2018, https://codepen.io/delphinpro/pen/NWzaGzz работает. Не может не работать.

[Даниил Архипов]

Сергей delphinpro, причина в чём-то другом у меня получается, в инспекторе заменил radio на checkbox и name у всех однинаковый и всё равно класс active работает только на один элемент(

[Rsa97]

darkhipov2018, Надо не в инспекторе менять, а исходный код сайта смотреть. У вас там какой-то фреймворк прикручен и на каждом элементе события слушаются. Видимо, через JS переключается.

[Даниил Архипов]

Rsa97, написал js для того чтобы класс active не убирался, но кажется где-то ошибся:
const servicesList = document.querySelector('.checkbox-group');
const activeClass = "quiz-btn--active";

servicesList.addEventListener("click", function(event) {
const element = event.target.closest(".radio__real-radio");
if (!element) return;

const activeElement = element.parentElement.querySelector(".quiz-btn--active");
activeElement?.classList?.remove(activeClass);

element.classList.add(activeClass);
});