如何驗證多組單選按鈕？

Question

我有兩組不同的單選按鈕，需要先進行驗證，然后才能提交表單。 將來，我可能需要為此添加更多選項，但目前有2組是/否問題。 這是到目前為止的單選按鈕的代碼。

<form name=myForm action="test.php" method="post">
<input type="radio" name="question1" id="question1">
<input type="radio" name="question1" id="question1">
<input type="radio" name="question2" id="question2">
<input type="radio" name="question2" id="question2">
<input type="submit" value="Submit">
</form>

因此，基本上可以在提交表單之前尋找一種方法來確保在每個組（問題1和問題2）中都選擇了一個選項。

Answer 1

這個問題實際上是兩個部分和一個補充說明。

旁注（與問題無關）是id始終應該是唯一的，具有兩個id為“ question1”的單選無效。

問題之一是檢查表單提交。 最簡單的方法是在表單的onsubmit標簽中添加“ return functName（）”。

<form name='myForm' action='test.php' method='post' onsubmit='return validate()'>

表單是否提交將取決於您在提交中返回true還是false。

第二種是抓住單選框並檢查是否已選中它們。 您可以使用以下命令獲取每個廣播電台的輸入：

document.forms.myForm.nameOfRadioHere

它將為您提供該名稱下的輸入列表。

然后，您只需要遍歷它們以檢查其中一個是否已將.check視為有效。

示例代碼：

Javascript：

function validate(){
  if (checkRadio("question1") && checkRadio("question2")){
    return true;
  }else{
    alert("Please fill in both radio boxes!");
    return false;
  }
}

function checkRadio(name){
  var radio = document.forms.myForm[name];
  for (var option in radio){
    if(radio[option].checked){
      return true;
    }
  }
  return false;
}

HTML

<form name='myForm' action="test.php" method="post" onsubmit='return validate()'>
  <input type="radio" name="question1">
  <input type="radio" name="question1">
  <input type="radio" name="question2">
  <input type="radio" name="question2">
  <input type="submit" value="Submit">
</form>