检查是否提交表单之前被选择的输入无线电ID(Check if input radio ID is s

我与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是只执行一次。 你需要每次都检查检​​查无线电值的1个检查单选按钮（当然，这是一个奇怪的词）

见@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/

文章来源: Check if input radio ID is selected before form is submitted