JQuery conflict (maybe?) Hide/Show Div based on Radio Box

1 Views

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:

Read More
<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!

Post Views: 1

Related posts

3 comments

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

  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();
}

    });

Comments are closed.