gpt4 book ai didi

javascript - 通过 radio 选项点击提交时需要显示警报

转载 作者:行者123 更新时间:2023-11-27 23:22:57 26 4
gpt4 key购买 nike

编辑:我不认为评论中提到的类似问题有帮助:(。除非我真的不擅长这个……我可以得到一个简单的警告消息,但无法得到提醒要显示的单个单选按钮。

我只是用带有 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>

最佳答案

错误是:

  1. 您使用了 document.form[0].element[1] 而不是 document.form[1]
  2. 您写的是 onsubmite 而不是 onsubmit
  3. 您所有的 radio 输入都具有相同的name 属性,因此您可以选择多个选项。您应该为同一组的每个单选按钮使用相同的名称
  4. 您可以单独使用 male.checked 来减少 male.checked == true

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.choice[0] 代替 document.form[0];(表单的第一个元素),它将查找列表 radio 并选择第一个 [0]

关于javascript - 通过 radio 选项点击提交时需要显示警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40108483/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com