Javascript验证无线电输入不起作用答案

【问题标题】：Javascript validating radio input not workingJavascript验证无线电输入不起作用
【发布时间】：2014-06-27 12:25:43
【问题描述】：

我正在使用以下 Javascript 代码来验证在提交表单之前至少检查了一个无线电输入，但我遇到了一个问题，因为即使没有检查无线电输入，表单也总是提交...可以有人请帮助告诉我我在这里缺少什么以及如何解决它？谢谢

<script type="text/javascript">

 function processPayment() {
    if ($("input[name='orderAmount']:checked").length > 0){
        alert('OK');
        document.getElementById('orderFrm').submit(); 
        return false;
    }
    else{
        alert('Please select order amount');
    }       
 }

 </script> 


<div id="content">
  <form id="orderFrm" name="orderFrm" action="https://...." method="post" target="_top">
       ....

       <div class="orderamnt">
        <label for="orderAmount50">
          <span class="labelText">50</span>
          <input type="radio" id="orderAmount50" name="orderAmount" value="50"/>
        </label>
       </div>
       <div class="orderamnt">
        <label for="orderAmount100">
          <span class="labelText">100</span>
          <input type="radio" id="orderAmount100" name="orderAmount" value="100"/>
        </label>
       </div>
       <div class="orderamnt">
        <label for="orderAmount200">
          <span class="labelText">200</span>
          <input type="radio" id="orderAmount200" name="orderAmount" value="200"/>
        </label>
       </div>

       <a class="buyNowButton" href="javascript:{}" onclick="processPayment()">Order</a>
       ....
   </form>
</div>

注意：

我在检查任何改变它的单选按钮时注意到：

  <div id="orderamnt">
    <span class="">
      <input type="radio" id="orderAmount200" name="orderAmount" value="200"/>

到...

  <div id="orderamnt">
    <span class="checked">
      <input type="radio" id="orderAmount200" name="orderAmount" value="200"/>

显然没有检查单选输入，这就是为什么它显然不能在我这边工作，所以想知道有没有办法可以从单选按钮验证第一个父跨度？

【问题讨论】：

未选择任何内容时不为我提交jsfiddle.net/j08691/z22J4。另外，提交表单后返回 false 也没有意义。
你运行的是什么版本的 jQuery？我似乎记得几年前:checked 有问题，我现在无法使用最新的 jQuery 进行复制。
@75thTrombone 我对我的问题添加了一个小编辑，解释了在使用 Chrome 开发工具检查/取消选中无线电输入时我发现 html 的变化

标签： javascript jquery html forms

【解决方案1】：

使用 jquery 1.6.4 或 +，此代码可以运行！

$('.buyNowButton').click(function(){   
    if ($("input[name='orderAmount']:checked").length > 0){   
        document.getElementById('orderFrm').submit(); 
        return false;
    }
    else{
        alert('Please select order amount');
    }       
 });

【讨论】：

【解决方案2】：

您需要使用is() 来执行此操作

if ($('input[name="orderAmount"]').is(':checked'))
{
}

【讨论】：

我在我的问题中添加了一个小编辑，解释了在使用 Chrome 开发工具检查/取消选中无线电输入时我发现 html 的变化
这个应该可以，见：stackoverflow.com/questions/15530582/…