javascript单选按钮验证

Question

大家好，我只是尝试对我的JavaScript单选按钮进行一些验证，但无法正常工作。 每次我单击提交按钮，它什么都没有发生。下面是代码。


HTML部分

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

使用Javascript：

function submitForm(){
        if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))
             {
           window.alert("You must have a  style")
             }

我应该带一个盒子，但是什么也没发生。 我想念什么吗？

Answer 1

你近了！ 根据您的评论，您的form变量未定义。 您需要在这样的地方定义form ：

function submitForm() {
  // define the form variable
  var form = document.getElementsByName("FirstPizza")[0];

  if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))  {
    window.alert("You must have a style");
  } else {
    window.alert("a style was selected");      
  }
}

（请参阅此处的工作jsfiddle）

Answer 2

为表单控件使用ID！ 尝试这个：

HTML部分

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" id="rbThinCrust" name="style"/>
            Thin Crust
                <br />
            <input type="radio" id="rbDeepDish" name="style" />
            Deep Dish
                <br />
            <input type="radio" id="rbSicilian" name="style" />
            Sicilian
        </td>
   </form>

使用Javascript：

function submitForm(){
        if (!document.getElementById("rbThinCrust").checked && !document.getElementById("rbThinCrust").checked && !document.getElementById("rbThinCrust").checked)
           //Logic for nothing being checked
}

Answer 3

您的HTML和JavaScript都已完全损坏。

首先，您的HTML。 您那里没有用于按钮的HTML，如果您首先将javascript事件连接到该按钮，则需要此按钮。

您将创建一个提交按钮，如下所示：

<input type="submit" value="Submit" onclick="submitForm(this)" />

您的单选按钮还应该通过value属性设置其文本，如下所示：

<input type="radio" name="style" value="Thin Crust" />
<input type="radio" name="style" value="Deep Dish" />
<input type="radio" name="style" value="Sicilian" />

现在，您的JavaScript看起来应该像这样：

function submitForm(form){
    if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))
    {
        window.alert("You must have a  style")
}

希望对您有用。

您的最终HTML应该如下所示：

<form name="FirstPizza">
Style:<br />
<input type="radio" name="style" value="Thin Crust" />Thin Crust<br />
<input type="radio" name="style" value="Deep Dish" />Deep Dish<br />
<input type="radio" name="style" value="Sicilian" />Sicilian
</form>