驗證JavaScript中的單選按鈕

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