Как изменить класс блока переключением конкретной радиокнопки на JS №2

Question

let paym = document.getElementsByName("payment");
let pl1 = document.querySelector(".payment-list1");
let pl3 = document.querySelector(".payment-list3");

for (i = 0; i < paym.length; i++) {
  paym[i].onclick = function () {
    if (paym[i] != this) pl1.classList.remove("open");
    pl3.classList.remove("open");

    if (payment_1.checked) {
      pl1.classList.add("open");
    }
    if (payment_3.checked) {
      pl3.classList.add("open");
    }
  };
}

.form-group {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid black;
}
.payment-list1,
.payment-list3 {
  display: none;
}
.payment-list1.open,
.payment-list3.open {
  display: block;
}

<div id="payments">
  <h2>Способы оплаты:</h2>
  <div class="form-group">
    <label class="control-label">Выберите оплату</label>
    <label class="payment input-parent">
      <input type="radio" name="payment" value="1" id="payment_1">Оплата наличными
    </label>
    <label class="payment input-parent">
      <input type="radio" name="payment" value="3" id="payment_3" checked="">На расчётный счёт организации
    </label>
  </div>
  <div class="form-group payment-list1">
    <p>Оплата наличными при получении</p>
  </div>
  <div class="form-group payment-list3">
    <label class="control-label" for="rekviziti">Ввести свои реквизиты</label>
    <textarea name="rekviziti" id="rekviziti" placeholder="Реквизиты для выставления счёта" class="le-input"></textarea>
  </div>
</div>

Вопрос является продолжением к первому вопросу.

На него был дан хороший пример цикла с перебором радиокнопок. Но есть дополнительно 2 момента.

При инициализации странички (поскольку у div в css прописано display: none) его изначально не видно. Становится видно ТОЛЬКО после переключения. Как прописать условие, чтобы радиобаттон с checked (по-умолчанию), задавал видимость соответствующему div при открытии страницы.
В примере дана чёткая привязка к индексу дивов. Но если пойти дальше и, например, нужно проявлять разные блоки в разных местах с разными классами, например, при переключении на кнопку с id="payment_1" проявлять div с классом, например .payment-list1, а при id="payment_3", например - .payment-list3 соответственно.

Сделал пока так. Момент № 2 работает, но если радиокнопок будет больше - условия будут выглядеть коряво и не элегантно. Момент № 1 пока не получается вообще сделать.

Answer 1

Попробуйте так сделать:

$('.js-radio-label').on('click', function() {
  var name_input = $(this).find('.js-radio-input').attr('name');

  $('.js-radio-input[name="' + name_input + '"]').each(function() {
    $(this).parents('.js-radio-label').removeClass('radio-label--active');
  });

  $(this).addClass('radio-label--active');
});

.radio-label {
  display: inline-block;
  vertical-align: center;
}

.radio-input {
  display: none;
}

.radio-input-block {
  border: 1px solid #dddddd;
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: center;
}

.radio-label.radio-label--active .radio-input-block {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>radio1: </span>
  <label class="radio-label radio-label--active js-radio-label">
    <input name="radio1"
           class="radio-input js-radio-input"
           type="radio" checked=checked>
    <div class="radio-input-block"></div>
  </label>
  <label class="radio-label js-radio-label">
    <input name="radio1"
           class="radio-input js-radio-input"
           type="radio">
    <div class="radio-input-block"></div>
  </label>
  <label class="radio-label js-radio-label">
    <input name="radio1"
           class="radio-input js-radio-input"
           type="radio">
    <div class="radio-input-block"></div>
  </label>
</div>


<div>
  <span>radio2: </span>
  <label class="radio-label radio-label--active js-radio-label">
    <input name="radio2"
            class="radio-input js-radio-input"
            type="radio"
            checked=checked>
    <div class="radio-input-block"></div>
  </label>
  <label class="radio-label js-radio-label">
    <input name="radio2"
           class="radio-input js-radio-input"
           type="radio">
    <div class="radio-input-block"></div>
  </label>
  <label class="radio-label js-radio-label">
    <input name="radio2"
           class="radio-input js-radio-input"
           type="radio">
    <div class="radio-input-block"></div>
  </label>
  <label class="radio-label js-radio-label">
    <input name="radio2"
           class="radio-input js-radio-input"
           type="radio">
    <div class="radio-input-block"></div>
  </label>
</div>

<div>
  <span>radio3: </span>
  <label class="radio-label radio-label--active js-radio-label">
    <input name="radio3"
            class="radio-input js-radio-input"
            type="radio"
            checked=checked>
    <div class="radio-input-block"></div>
  </label>
  <label class="radio-label js-radio-label">
    <input name="radio3"
           class="radio-input js-radio-input"
           type="radio">
    <div class="radio-input-block"></div>
  </label>
</div>

БЛОГ НА HUSL

Как изменить класс блока переключением конкретной радиокнопки на JS №2

Ответы (1 шт):