在提交表單之前檢查是否選擇了輸入無線電 ID

Question

我正在 WordPress 上與 WooCommerce 合作。 在結帳時，我想檢查在用戶提交之前是否選擇了某個單選按鈕。 如果選擇了某個 id，則window.alert運行window.alert 。 我有 WooCommerce 提供的以下表格：

<ul id="shipping_method">
    <li>
        <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_legacy_local_pickup" value="legacy_local_pickup" class="shipping_method">
        <label for="shipping_method_0_legacy_local_pickup">Local Pickup</label>
    </li>
    <li>
        <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_distance_rate_shipping" value="distance_rate_shipping" class="shipping_method" checked="checked">
        <label for="shipping_method_0_distance_rate_shipping">Delivery from 536 S College Ave, Chicago, IL</label>                  
    </li>
</ul>

到目前為止，我正在使用以下腳本進行測試：

<script type='text/javascript'>
    if (document.getElementById('shipping_method_0_distance_rate_shipping').checked) {
        alert("Delivery checked!");
    }
</script>

該腳本在頁面加載時效果很好，但是如果我在提交頁面之前取消選擇並再次選擇單選按鈕，腳本將無法運行。 如果我能實時看到他們正在選擇哪個，那將解決我的緊迫問題。

我感謝您的時間和幫助。

Answer 1

單擊時發出警報：

window.onload = function () { // when page loads

 // To alert when clicking

  document.getElementById('shipping_method_0_distance_rate_shipping').onclick=function() {
    alert("Delivery checked!");
  }    

  // To test when submitting:

  document.getElementById('yourFormId').onsubmit=function() {
    if (!document.getElementById('shipping_method_0_distance_rate_shipping').checked) {          
      alert("Delivery not checked!");
      return false; //  cancel submit
    }    
  }    
}

詢問他們是否點擊了正確的選項：

window.onload = function () { // when page loads

  document.getElementById('yourFormId').onsubmit=function() {
    return confirm(document.getElementById('shipping_method_0_distance_rate_shipping').checked ? 
      "Local Pickup?" : 
      "Delivery from 536 S College Ave, Chicago, IL?");
  }    
}

Answer 2

您的 Javascript 只執行一次。 每次檢查單選按鈕時，您都需要檢查選中單選的值（好吧，這是一個奇怪的短語）

有關工作示例，請參閱@Afnan Ahmad 的回答。

Answer 3

在提交之前調用此函數。 如果你想停止表單提交不是添加在你形成onsubmit

<form name="yourform" onsubmit="return validate();"> 

 function validate() { if (document.getElementById('shipping_method_0_distance_rate_shipping').checked) { alert("checked submit form"); return true; } else { alert("Unchecked form will not be submitted"); return false; } }

 <input id="shipping_method_0_distance_rate_shipping" name="shipping_method[0]" type="checkbox" onclick="validate()" />

Answer 4

您可以為單選按鈕指定一個類，並在此基礎上獲得單擊的值。

例如

HTML

<input type="radio" name="option" value="o1" class= 'test'>option1</input>
<input type="radio" name="option" value="o2" class = 'test'>option2</input

JS

$(document).on('click','.test',function(event){
    var selectedOption = $(this).val()
  console.log(selectedOption)
});

您可以查看小提琴以供參考https://jsfiddle.net/7okvyxx3/