这让我发疯。我尝试了各种不同的方法来做到这一点。尝试根据单选框选择显示/配置 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。
任何帮助将不胜感激。 谢谢!
最佳答案
使用:checked
选择器检查id为 payment_method_cod
的单选元素是否被选中。
$('# payment_method_cod:checked')
将根据单选按钮是否选中以及切换
的条件返回true/false
code> 它,当 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>
关于javascript - JQuery 冲突(也许?)基于单选框隐藏/显示 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33096588/