验证javascript中的单选按钮答案

【问题标题】：Validate radio button in javascript验证javascript中的单选按钮
【发布时间】：2016-12-11 23:19:40
【问题描述】：

function validate()
{
   var payment = checkRadio();
   if (payment == false)
   {
      alert("Please select one button")
   }
}

function checkRadio()
{
var payment = document.getElementsByName("payment");
for(i = 0; i < payment.length; i++)
    {
        if(payment[i].checked)
        {
            return true;
        }
        else
        {
            return false;
        }
    }


}

下面的 html 代码为客户创建单选按钮以选择其中一种付款方式

<P> Payment Options:
<INPUT TYPE="Radio" Name="payment" Value="CC">Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">Debit Card
<INPUT TYPE="Radio" Name="payment" Value="PP">PayPal 
</P>

<INPUT TYPE="button" VALUE="  SUBMIT  " onClick="validate()">

我的问题是，当我执行此代码并在 chrome 上运行它时，什么也没有发生。如果有人能指出我哪里出错了，我将不胜感激。

【问题讨论】：

你在哪里调用validate()函数？
<INPUT TYPE="button" VALUE=" SUBMIT " onClick="validate()"> 函数调用很好，因为我有其他字段，我检查它是否已被填充并且它们工作正常，它只是检查导致问题的单选按钮

标签： javascript html arrays radio-button

【解决方案1】：

你需要用<form>包围你的html代码

<form>
Payment Options:
<INPUT TYPE="Radio" Name="payment" Value="CC">Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">Debit Card
<INPUT TYPE="Radio" Name="payment" Value="PP">PayPal 


<INPUT TYPE="button" VALUE="  SUBMIT  " onClick="validate()">  
</form>

然后在您的 javascript 中将 checkRadio 更改为：

function checkRadio()
{
var payment = document.getElementsByName('payment');

var paymentType = '';

for(i = 0; i < payment.length; i++)
    {    
        if(payment[i].checked)
        {
            console.log(payment[i].value)
            paymentType = payment[i].value;            
        }
   }
   return paymentType != '' ? true : false;
}

JSFiddle：https://jsfiddle.net/ttgrk8xj/16/

【讨论】：

windows.validate 只是自动运行代码而不点击任何东西，但在我的代码中，验证功能只有在你点击提交后才会执行，它应该会提醒并说请选择一个按钮但什么也没发生
我刚刚编辑了答案并进行了测试。请看一下 JSFiddle。
非常感谢它现在可以使用，它是 console.log(payment[i].value) 部分

【解决方案2】：

在您的代码中，您只检查第一个元素，因为您是在第一次迭代中从函数返回。

function checkRadio()
{
  var payment = document.getElementsByName("payment");
  for(i = 0; i < payment.length; i++)
    {
        if(payment[i].checked)
        {
            return true;
        }
    }

  return false;
}

【讨论】：