Question

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上运行时，没有任何反应。如果有人能够发现我出错的地方，我会非常感激。

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

Answer 2

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

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

  return false;
}

在javascript中验证单选按钮

2 个答案: