Question

我正在使用WordPress上的WooCommerce。在结帐时，我想检查在用户提交之前是否选择了某个单选按钮。如果选择了某个ID，则立即运行mydataset.table$20160519。我有以下表格由WooCommerce提供：

window.alert

到目前为止，我使用以下脚本来测试：

<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>

当页面加载时脚本运行良好，但是如果我在提交页面之前取消选择并再次选择单选按钮，则脚本不起作用。如果我能够实时看到他们正在选择哪个，这将解决我的直接问题。

感谢您的时间和帮助。

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();">

＆＃13;

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;
        }
    }

＆＃13;

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

＆＃13;

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/

检查表单提交前是否选择了输入无线电ID

4 个答案: