javascript - 在提交表单之前检查是否选择了输入 radio ID

Question

我正在 WordPress 上使用 WooCommerce。在结帐中，我想检查在用户提交之前是否选择了某个单选按钮。如果选择了某个 ID，则立即运行 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?");
  }    
}