Question

编辑：我不认为评论中的类似问题可以帮助:(。除非我真的很糟糕...我可以得到一个简单的警报信息，但不能得到警告单个单选按钮显示。

我正在做一个带有Javascript单选按钮的简单表单，在选择其中一个选项时点击提交后发出提醒。我是Javascript的新手，所以我不确定我还能做什么......

HTML可以正常工作，但其中的功能根本不存在。我迷失在别的地方。任何建议都会非常感激。

<!DOCTYPE html>
<html>
<head>
    <title> Gender Check </title>
    <meta charset ="UTF-8">
</head>

<body>

    <form id= "form" name ="form" onsubmite="gender()">

        <label>Male
        <input type="radio" id="male" name="male"/>
        </label>

        <label>Female
        <input type="radio" id="female" name="female"/>
        </label>

        <label>Trans
        <input type="radio" id="trans" name="trans"/>
        </label>

        <label>Alien
        <input type="radio" id="alien" name="alien"/>
        </label>

        <label>Boeing AH-64 Apache Attack Helicopter
        <input type="radio" id="helicopter" name="helicopter"/>
        </label>

        <input type="submit" name="submit" value="Don't lie to me."/>

    </form>

    <script type="text/javascript">

    function gender() {
    var male=document.form[0].element[0];
    var female=document.form[0].element[1];
    var trans=document.form[0].element[2];
    var alien=document.form[0].element[3];
    var helicopter=document.form[0].element[4];

    if (document.getElementById('male').checked == true)
    {
    alert("You are a Male.")
    }
    else if (document.getElementById('female').checked == true)
    {
    alert("You are a Feale.")
    }
    else if (document.getElementById('trans').checked == true)
    {
    alert("You are Trans.")
    }
    else if (document.getElementById('alien').checked == true)
    {
    alert("You are an...uh...Alien?")
    }
    else if (document.getElementById('helicopter').checked == true)
    {
    alert("You are definitely not a four-blade, twin-turboshaft attack helicopter with a tailwheel-type landing gear arrangement and a tandem cockpit for a two-man crew.")
    }
    else
    {
    alert("Please pick a choice")
    }

}
    document.forms[0].onsubmit = gender;

    </script>

</body>
</html>

Answer 1

 <form id= "form" name ="form" onsubmit="gender()">

您需要关联一个名为onsubmit的事件，该事件将在提交表单时调用gender()函数。

你可以通过函数返回false来阻止提交，为此你需要做类似的事情

onsubmit="return gender()"

如果您要提交表单，请将按钮类型更改为button并将事件关联为onclick='gender()'，并保持其余代码不变。

Answer 2

错误是：

您使用document.form[0].element[1]代替document.form[1]
您撰写了onsubmite而不是onsubmit
您的所有收音机输入都具有相同的name属性，因此您可以选择多个选项。您应该对同一组的每个单选按钮使用相同的名称
您可以仅使用male.checked == true

male.checked

function gender() {
      
      var male = document.form[0];
      var female = document.form[1];
      var trans = document.form[2];
      var alien = document.form[3];
      var helicopter = document.form[4];

      if (male.checked) {
        alert("You are a Male.")
      } else if (female.checked) {
        alert("You are a Female.")
      } else if (trans.checked) {
        alert("You are Trans.")
      } else if (alien.checked) {
        alert("You are an...uh...Alien?")
      } else if (helicopter.checked) {
        alert("You are definitely not a four-blade, twin-turboshaft attack helicopter with a tailwheel-type landing gear arrangement and a tandem cockpit for a two-man crew.")
      } else {
        alert("Please pick a choice")
      }

    }

<!DOCTYPE html>
<html>

<head>
  <title>Gender Check</title>
  <meta charset="UTF-8">
</head>

<body>

  <form id="form" name="form" onsubmit="gender()">

    <label>Male
      <input type="radio" id="male" name="choice" />
    </label>

    <label>Female
      <input type="radio" id="female" name="choice" />
    </label>

    <label>Trans
      <input type="radio" id="trans" name="choice" />
    </label>

    <label>Alien
      <input type="radio" id="alien" name="choice" />
    </label>

    <label>Boeing AH-64 Apache Attack Helicopter
      <input type="radio" id="helicopter" name="choice" />
    </label>

    <input type="submit" name="submit" value="Don't lie to me." />

  </form>


</body>

</html>

注意

而不是document.form[0];（表单的第一个元素），您可以使用document.form.choice[0]来查找广播列表并选择第一个[0]

通过无线电选择点击提交时需要显示提醒

2 个答案: