jQuery冲突（也许是？）基于单选框的隐藏/显示Div

Question

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!

Answer 1

Use :checked selector to check if the radio element with id payment_method_cod is checked or not.

$('#payment_method_cod:checked') will return true/false based on the condition if the radio button is checked or not and toggle it, when true , the element #checkout_insurance will be shown. Assuming the id's used in the code are unique.

Demo

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

Answer 2

$("input[name='payment_method']").change(function () {
    if ($(this).attr("id") == "payment_method_cod" && $(this).is(':checked')) {
        alert('show');
    } else {
        alert('hide');
    }
});

Please use .change() on checkbox use .click() on button. Try this approach this will select change event on checkbox and check if the id of the checkbox is payment_method_cod it will then show or hide depending on checked property

demo

Answer 3

Changing your code a bit :

$("input[name='payment_method']").click(function () {
var _this = $(this);
if (_this.val() == "cod") {
    $("#checkout_insurance").show();
} else {
    $("#checkout_insurance").hide();
}

});