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

Posted 2023-03-05

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

【英文标题】：Javascript getElementById() works for a text box but doesn't work with radio buttons or drop-down selectors [duplicate]

【发布时间】：2014-12-29 15:19:40

【问题描述】：

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

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

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

【问题讨论】：

已经问过了。请看这里***.com/questions/15839169/…

HTML 中的两个元素不能在同一页面上具有相同的 ID。它总是只会找到第一个。此外，第一个始终具有 yes 的值并不意味着它已选中

给你。一个工作的 jsfiddle：jsfiddle.net/ianhazzard/vj1o3xcq

感谢大家的帮助，我真的很感激。谢谢你教我我做错了什么。我现在都准备好了。非常感谢！

【参考方案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 终于上火狐了。

【讨论】：

伙计，非常感谢。这就像一个魅力。也感谢您教我这个概念，我非常感谢您的帮助！

嗨罗伯特，很抱歉花了这么长时间来投赞成票。我不是一个经常使用的用户，所以我花了一段时间才获得足够的声誉并弄清楚 Stack Overflow 上的事情是如何运作的，但我想把这件事做对，因为你帮我解决了这个问题 :)