Как добавлять класс к активной radio кнопке?

Question

[bazliiii]

Как добавить класс для выбранной radio кнопки?

<div class="faq__items">
<div class="faq__item">
            <label class="faq__question" for="faq_1">
                <div class="faq__question--top">
                    <label class="faq__title" for="faq_1">text
                    </label>
                    <img src="./arrow.svg" alt="arrow" class="faq__arrow">
                </div>
                <input class="faq__input" type="radio" name="faq" id="faq_1">
                <div class="faq__content">
                    <p class="faq__text">
                        text
                    </p>
                </div>
            </label>
        </div>
<div class="faq__item">
            <label class="faq__question" for="faq_2">
                <div class="faq__question--top">
                    <label class="faq__title" for="faq_2">text
                    </label>
                    <img src="./arrow.svg" alt="arrow" class="faq__arrow">
                </div>
                <input class="faq__input" type="radio" name="faq" id="faq_2">
                <div class="faq__content">
                    <p class="faq__text">
                        text
                    </p>
                </div>
            </label>
        </div>
</div>

Вот к примеру мы выбрали item, и нужно, чтобы у выбранной radio к элементу .faq__question--top добавлялся active.

Comments

[imko]

Так у радио или у faq__question--top?

[HardBot]

Вас гугл забанил?

[bazliiii]

imko, при клики на радио класс добавлять для faq__question--top
По типу кликнули на radio и для this.top..addclass..
Но я правильно не могу написать

[bazliiii]

HardBot, Не смог найти рабочего ответа, поэтому и обратился сюда

[HardBot]

bazliiii, а как ты вопрос гуглу задал?

[bazliiii]

HardBot, по разному:
add class to checked radio button js , добавление класса при активной radio и тд.

[HardBot]

bazliiii, проверяй, оно? Кинул ответ

Answer 1

[0xD34F]

const items = document.querySelectorAll('.faq__item');

items.forEach(n => n.addEventListener('change', onChange));

function onChange(e) {
  items.forEach(n => n
    .querySelector('.faq__question--top')
    .classList
    .toggle('active', e.currentTarget === n)
  );
}

Comments

[bazliiii]

0xD34F, а как сделать что бы первый элемент сразу получал класс active ?
пробовал добавить эту строчку, но не сработало
items.first().addclass("active");

[bazliiii]

bazliiii, разобрался

let first = document.querySelector('.faq__question--top')
 first.classList.add("active");

Answer 2

[HardBot]

document.querySelectorAll('.faq__item').forEach(item => { 
   item.addEventListener('click', event => { 
      // Если есть класс active - удалить, нету - добавить 
      item.querySelector('.faq__question--top').classList.toggle('active') 
   }) 
})

Comments

[bazliiii]

toggle как-то не так работает в данном случае , класс не добавляется

Я попробовал добавить вот такую конструкцию , но тоже не работает может где-то ошибку в ней допустил
if (item.querySelector('.faq__question--top').contains('active')) {
item.querySelector('.faq__question--top').classList.add('active')
} else {
item.querySelector('.faq__question--top').classList.add('active')
}

[HardBot]

bazliiii, класс добавляется блоку faq__question--top

Answer 3

[Сергей delphinpro]

.faq__question--top:has(input:checked) {
  /* нужные стили */
}

К сожалению не работает по умолчанию в FireFox. Но скоро уже можно будет юзать вовсю.