我想添加一個類，<li>如果它包含一個選中的單選按鈕。這是我當前的 HTML 結構：<li class="wc_payment_method payment_method_paypal"> <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal"> <label for="payment_method_paypal">PayPal</label></li>這是我到目前為止所嘗試過的：<script> jQuery(function ($) { $(".wc_payment_method :checked").each(function() { $(this).addClass("is-checked"); alert(this.id + " is checked"); }); });</script>警報起作用了。<li>它顯示帶有選中單選按鈕的正確項目。但有兩個問題我無法解決。腳本不會is-checked在頁面加載時添加類如果我選擇其他單選按鈕，警報將不再起作用。有人能把我推向正確的方向嗎？
2 回答
繁花不似錦
TA貢獻1851條經驗 獲得超4個贊
如果您希望在選中或取消選中復選框時更改類，則需要一個事件處理程序。處理程序可以檢查每個 LI 是否包含選中的按鈕。
$(".wc_payment_method :radio").click(function() {
$(".wc_payment_method").each(function() {
$(this).toggleClass("is-checked", $(this).find(":radio:checked").length > 0);
});
});
.is-checked {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="wc_payment_method payment_method_paypal">
<input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
<label for="payment_method_paypal">PayPal</label>
</li>
<li class="wc_payment_method payment_method_credit">
<input id="payment_method_credit" type="radio" class="input-radio" name="payment_method" value="credit">
<label for="payment_method_paypal">Credit Card</label>
</li>
</ul>
拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
您的代碼僅向輸入標記添加一個類。要在單擊事件上添加特定類，您必須使用 jquery 中的 $().click 方法。
jQuery(function ($) {
function addClass() {
$(".wc_payment_method input:checked").each(function() {
$(this).closest('li').addClass('yourClass');
$(this).addClass("is-checked");
alert(this.id + " is checked");
});
}
addClass();
$(".wc_payment_method input").click(function(){
addClass();
});
});
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
<ul>
<li class="wc_payment_method payment_method_paypal">
<input id="payment_method_paypal" type="radio" class="input-radio" checked name="payment_method" value="paypal">
<label for="payment_method_paypal">PayPal</label>
</li>
<li class="wc_payment_method payment_method_paypal1">
<input id="payment_method_paypal1" type="radio" class="input-radio" name="payment_method1" value="paypal2">
<label for="payment_method_paypal1">PayPal</label>
</li>
</ul>
- 2 回答
- 0 關注
- 216 瀏覽
添加回答
舉報
0/150
提交
取消