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 here）

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>

javascript单选按钮验证

3 个答案: