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

Question

[denism300]

Есть конструкция

<div class="form-fields">
    <div class="wrapper-from-field step-one active">
        <label class="input-radio step-one">
            <input type="radio" class="build-calc-form-step-one-radio" name="step-one" value="oneFloor" checked>
        </label>
    </div>
    <div class="wrapper-from-field step-one">
        <label class="input-radio step-one">
            <input type="radio" class="build-calc-form-step-one-radio" name="step-one" value="mansarda">
        </label>
    </div>
    <div class="wrapper-from-field step-one">
        <label class="input-radio step-one">
            <input type="radio" class="build-calc-form-step-one-radio" name="step-one" value="twoFloor">
        </label>
    </div>
</div>

как при выборе радиокнопки переключать родителю wrapper-from-field класс active?

Answer 1

[0xD34F]

const containerSelector = '.form-fields';
const itemSelector = `${containerSelector} .wrapper-from-field`;
const activeClass = 'active';
const toggle = item => item
  .closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(n => n.classList.toggle(activeClass, n === item));

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('change', this);
}, e => toggle(e.currentTarget));

// или

document.addEventListener('change', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    toggle(item);
  }
});

Comments

[denism300]

а как модифицировать скрипт, если конструкция примерно такая:

<form>
    <div class="step-one">
        <div class="form-fields">
            <div class="wrapper-from-field step-one active">
                <label class="input-radio step-one">
                    <input type="radio" class="build-calc-form-step-one-radio" name="step-one" checked>
                </label>
            </div>
            <div class="wrapper-from-field step-one">
                <label class="input-radio step-one">
                    <input type="radio" class="build-calc-form-step-one-radio" name="step-one">
                </label>
            </div>
            <div class="wrapper-from-field step-one">
                <label class="input-radio step-one">
                    <input type="radio" class="build-calc-form-step-one-radio" name="step-one">
                </label>
            </div>
        </div>
    </div>
    <div class="step-two">
        <div class="form-fields">
            <div class="wrapper-from-field step-two active">
                <label class="input-radio step-two">
                    <input type="radio" class="build-calc-form-step-two-radio" name="step-two" checked>
                </label>
            </div>
            <div class="wrapper-from-field step-two">
                <label class="input-radio step-two">
                    <input type="radio" class="build-calc-form-step-two-radio" name="step-two">
                </label>
            </div>
            <div class="wrapper-from-field step-two">
                <label class="input-radio step-two">
                    <input type="radio" class="build-calc-form-step-two-radio" name="step-two">
                </label>
            </div>
        </div>
    </div>
    ...
</form>

т.е., класс active должен переключаться внутри блоков step-XXX

[0xD34F]

Обновил ответ.