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的广播元素是否已选中。

如果选中或不选中单选按钮，则

$('#payment_method_cod:checked')将根据条件返回true/false，toggle时，true，元素#checkout_insurance将返回$(document).on('change', "input[name='payment_method']", function() { $("#checkout_insurance").toggle($('#payment_method_cod').is(':checked')); }).trigger('change');显示。假设代码中使用的id是唯一的。

<强>演示

＆＃13;

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

＆＃13;

$scope.colourname =['blue','green'];

＆＃13;

Answer 2

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

请在复选框上使用.change()按钮上的.click()。尝试这种方法，这将选中复选框上的更改事件，并检查复选框的ID是否为payment_method_cod，然后根据已检查的属性显示或隐藏

demo

Answer 3

稍微改变你的代码：

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

}）;

JQuery冲突（可能？）隐藏/显示基于Radio Box的Div

3 个答案: