javascript - 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. 如果我选择其他单选按钮，警报将不再起作用。

有人能把我推向正确的方向吗？

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>