在提交表格之前，请检查是否选择了输入无线电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?");
  }    
}

Answer 2

你的 Javascript 只执行一次。每次检查单选按钮时，您都需要检查选中的收音机的值（嗯，这是一个奇怪的短语）

参见艾哈迈德@Afnan的答案，了解工作示例。

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/