编辑:我不认为评论中提出的类似问题有帮助:(。除非我真的不擅长这个......我可以得到一个简单的警报消息，但无法得到提醒显示单个单选按钮。
我只是用 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>
最佳答案
错误是:
- 您使用了
document.form[0].element[1]而不是document.form[1] - 您编写了
onsubmite而不是onsubmit - 您的所有 radio 输入都具有相同的
name属性，因此您可以选择多个选项。您应该为同一组的每个单选按钮使用相同的名称 - 您可以单独使用
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[0]; (表单的第一个元素)，您可以使用 document.form.choice[0] 来查找列表 radio 并选择第一个 [0]
关于javascript - 通过单选选项点击提交时需要显示警报，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40108483/