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 从表单更改为单选按钮或下拉选择器，弹出框将始终仅显示列表中第一个单选或第一个下拉选项的值。例如，在下面的代码中，第一个单选选项是“yes”，第二个单选选项是“no”。无论我选择"is"还是“否”，弹出框总是给出"is"。

<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' />

有谁知道一种编码方法，以便单选 yes 会给出弹出消息"is"，而单选 no 会给出弹出消息 no？

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)，使您可以“作为一个组”直接访问单选按钮。您可以在其中找到值。

注意:如果使用 Firefox，您需要版本 33(2014-10-14 发布)或更高版本。 RadioNodeList 终于到达了 Firefox。