JQuery冲突（可能？）隐藏/显示基于Radio Box的Div(JQuery conflict (maybe?) Hide/Show Div based on Radio Box)

 这真让我抓狂。 我尝试了各种不同的方法来做到这一点。 试图根据收音机选择显示/配置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。 
 
 任何帮助将不胜感激。 谢谢！ 

This is driving me crazy. I have tried every different ways to do this. Trying to show/hive a div based on a radio box selection. Below is my code into my 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>
 
I cant get to work. If I place another cdn of the jQuery on the footer, the function works, however messes up a lot of other stuff. jQuery is being loaded on the header. I am current using jQuery 1.11.3.
 
Any help will be appreciated. Thank you!

原文：https://stackoverflow.com/questions/33096588