jQuery: Добавить класс, если элемент списка отмечен переключателем внутри

Question

Я хочу добавить собственный класс, если внутри элемента списка есть активная радиокнопка.

Я пробовал этот код, чтобы добавить класс, но, похоже, в нем есть ошибка:

$('input').change(function() {
  var check = $('.wc_payment_method').map(function(e) {
    return $(this).find('input[type="radio"]').is(':checked')
  }).get()

  $('.wc_payment_method').addClass('active');
})

.wc_payment_method {padding: 10rem;}
.active {background-color: #eee;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
  <li class="wc_payment_method payment_method_paypal">
    <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
    <label for="payment_method_paypal">PayPal</label>
  </li>

  <li class="wc_payment_method payment_method_creditcard">
    <input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
    <label for="payment_method_creditcard">Credit card</label>
  </li>
</ul>

Answer 1

• L oop ваши входы используют .each()
• go для $(this).closest('selector') для выбора ближайшего селектора
• используйте .toggleClass('className', Boolean) для переключения класса.

const $inp = $('[name="payment_method"]');

$inp.on("change", function() {
  $inp.each(function() {
    $(this).closest('.wc_payment_method').toggleClass('active', this.checked);
  });
});

.active { background: gold; }

<ul>
  <li class="wc_payment_method payment_method_paypal">
    <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
    <label for="payment_method_paypal">PayPal</label>
  </li>

  <li class="wc_payment_method payment_method_creditcard">
    <input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
    <label for="payment_method_creditcard">Credit card</label>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

или не использовать JavaScript вообще:

• Использовать :checked псевдо
• Таргетинг на элемент-метку родного элемента Общий селектор Sibling Combinator ~

/* Style the adjacent LABEL instead */
.input-radio:checked ~ label {
  background: gold;
}

<ul>
  <li class="wc_payment_method payment_method_paypal">
    <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
    <label for="payment_method_paypal">PayPal</label>
  </li>

  <li class="wc_payment_method payment_method_creditcard">
    <input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
    <label for="payment_method_creditcard">Credit card</label>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>