Javascript getElementById() 适用于文本框，但不适用于单选按钮或下拉选择器 [重复]

Question

好的，在搞砸了很多天之后，阅读了无数的帮助页面，是时候寻求帮助了。这段代码没有问题。我在表单中输入的任何文本都将显示在弹出框中。很好。

<script>
function yesorno1(){
	var form = document.getElementById('escalation');
	if(form.value != "")
		alert("You entered: " + form.value)
	else
		alert("There is some problem")		
}
</script>
<input type='text' id='escalation' />
<input type='button' onclick='yesorno1()' value='Submit' />

如果我将 HTML 从表单更改为单选按钮或下拉选择器，弹出框将始终仅显示列表中第一个单选或第一个下拉选项的值。例如，在下面的代码中，第一个单选选项是“是”，第二个单选选项是“否”。无论我选择是或否，弹出框总是给出“是”。

<script>
function yesorno2(){
	var rad = document.getElementById('escalation2');
	if(rad.value != "")
		alert("You entered: " + rad.value)
	else
		alert("There is some problem")		
}
</script>

Is this an escalation?<br>
<input type='radio' id='escalation2' value='yes'> Yes<br>
<input type='radio' id='escalation2' value='no'> No<br><br>
<input type='button' onclick='yesorno2()' value='Submit' />

有没有人知道这样的编码方法，这样无线电是会给出弹出消息“是”，而无线电不会给出弹出消息否？

Answer 1

<script>
function yesorno2(){
	var rad = document.getElementById('theForm').elements['escalation2'];
	if(rad.value != "")
		alert("You entered: " + rad.value)
	else
		alert("There is some problem")		
}
</script>
<form id='theForm'>
Is this an escalation?<br>
<input type='radio' name='escalation2' value='yes'> Yes<br>
<input type='radio' name='escalation2' value='no'> No<br><br>
<input type='button' onclick='yesorno2()' value='Submit'>
</form>

你犯了两个错误：

• 单选按钮的共同属性是name，而不是id
• 不要“抓住”单选按钮，选择表单元素：它包含一个数组 (elements)，您可以“作为一个组”直接访问单选按钮。在那里你可以找到value。

注意：如果使用 Firefox，您需要版本 33（2014-10-14 发布）或更高版本。 RadioNodeList 终于上火狐了。