jQuery: Добавить класс, если LI установил флажок

Question

Я хочу добавить класс к <li>, если он содержит проверенную радиокнопку.

Это моя текущая структура HTML:

<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>

И вот что Я пробовал до сих пор:

<script>
    jQuery(function ($) {
        $(".wc_payment_method :checked").each(function() {
            $(this).addClass("is-checked");
            alert(this.id + " is checked");
        });
    });

</script>

Предупреждение работает. Он показывает правильный элемент <li> с установленным переключателем. Но есть две проблемы, которые я не смог решить.

1. Скрипты не добавляют класс is-checked при загрузке страницы
2. Предупреждение не работает, если я выбираю другой переключатель.

Может ли кто-нибудь направить меня sh в правильном направлении?

Answer 1

Если вы хотите, чтобы классы менялись, когда вы устанавливаете или снимаете флажки, вам нужен обработчик событий. Обработчик может проверить, содержит ли каждый LI проверенную кнопку.

$(".wc_payment_method :radio").click(function() {
  $(".wc_payment_method").each(function() {
    $(this).toggleClass("is-checked", $(this).find(":radio:checked").length > 0);
  });
});

.is-checked {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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_credit">
    <input id="payment_method_credit" type="radio" class="input-radio" name="payment_method" value="credit">
    <label for="payment_method_paypal">Credit Card</label>
  </li>
</ul>

Answer 2

Ваш код добавляет класс только для входных тегов. Чтобы добавить определенный c класс для события click, вы должны использовать $ (). Click метод из jquery.

jQuery(function ($) {
function addClass() {
	$(".wc_payment_method input:checked").each(function() {
		$(this).closest('li').addClass('yourClass');
		$(this).addClass("is-checked");
		alert(this.id + " is checked");
	});
}
addClass();

$(".wc_payment_method input").click(function(){
	addClass();
});
});

<script
			  src="https://code.jquery.com/jquery-3.5.0.min.js"
			  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
			  crossorigin="anonymous"></script>
<ul>
<li class="wc_payment_method payment_method_paypal">
    <input id="payment_method_paypal" type="radio" class="input-radio" checked name="payment_method" value="paypal">
    <label for="payment_method_paypal">PayPal</label>
</li>

<li class="wc_payment_method payment_method_paypal1">
    <input id="payment_method_paypal1" type="radio" class="input-radio" name="payment_method1" value="paypal2">
    <label for="payment_method_paypal1">PayPal</label>
</li>

</ul>