javascript - JQuery 冲突(也许？)基于单选框隐藏/显示 Div

Question

这让我发疯。我尝试了各种不同的方法来做到这一点。尝试根据单选框选择显示/配置一个 div。下面是我在 main.js 中的代码:

$("input[name='payment_method']").click(function () {
    if ($(this).attr("id") == "payment_method_cod") {
        $("#checkout_insurance").show();
    } else {
        $("#checkout_insurance").hide();
    }
});

HTML:

<div id="checkout_insurance">
    <h2>Checkout with Insurance</h2>
</div>

<div id="payment" class="woocommerce-checkout-payment">

    <ul class="payment_methods methods">
        <li class="payment_method_cod">
            <input id="payment_method_cod" type="radio" class="input-radio" name="payment_method" value="cod" data-order_button_text="" checked="checked">

            <label for="payment_method_cod">
                ...
        </li>
        <li class="payment_method_firstdata">
            <input id="payment_method_firstdata" type="radio" class="input-radio" name="payment_method" value="firstdata" data-order_button_text="">

            <label for="payment_method_firstdata">
                ....
        </li>
    </ul>
</div>

我无法开始工作。如果我将另一个 jQuery 的 cdn 放在页脚上，该函数可以工作，但是会弄乱很多其他东西。 jQuery 正在标题上加载。我目前使用的是 jQuery 1.11.3。

任何帮助将不胜感激。谢谢!

Answer 1

使用:checked选择器检查id为payment_method_cod的radio元素是否被选中。

$('#payment_method_cod:checked') 将根据单选按钮是否被选中的条件返回 true/false 和 toggle 它，当 true 时，将显示元素 #checkout_insurance。假设代码中使用的 ID 是唯一的。

演示

$(document).on('change', "input[name='payment_method']", function() {
  $("#checkout_insurance").toggle($('#payment_method_cod').is(':checked'));
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="checkout_insurance">
  <h2>Checkout with Insurance</h2>
</div>

<div id="payment" class="woocommerce-checkout-payment">

  <ul class="payment_methods methods">
    <li class="payment_method_cod">
      <input id="payment_method_cod" type="radio" class="input-radio" name="payment_method" value="cod" data-order_button_text="" checked="checked">

      <label for="payment_method_cod">Payment</label>
      ...
    </li>
    <li class="payment_method_firstdata">
      <input id="payment_method_firstdata" type="radio" class="input-radio" name="payment_method" value="firstdata" data-order_button_text="">

      <label for="payment_method_firstdata">FirstData</label>
      ....
    </li>
  </ul>
</div>