Question

如何更改相同ID输入的所有值？

<input type="hidden" id="secure" name="secure" value="">
<input type="hidden" id="secure" name="secure" value="">
<input type="hidden" id="secure" name="secure" value="">
<input type="hidden" id="secure" name="secure" value="">

我用

<script>
document.getElementById("secure").value = '123456';
</script>

但只有第一个改变。

<input type="hidden" id="secure" name="secure" value="123456">
<input type="hidden" id="secure" name="secure" value="">
<input type="hidden" id="secure" name="secure" value="">
<input type="hidden" id="secure" name="secure" value="">

Answer 1

ID应该是唯一的 - 这就是它们的重点。类是用于相反的用途，即可能存在单个实例的多个实例。

假设您将ID更改为类，我们可以执行以下操作：

[].forEach.call(document.querySelectorAll('.secure'), function(el) {
    el.value = '123456';
});

Answer 2

您需要先将id="secure"更改为class="secure"

<强> HTML：

<input type="hidden" class="secure" name="secure" value="">
<input type="hidden" class="secure" name="secure" value="">
<input type="hidden" class="secure" name="secure" value="">
<input type="hidden" class="secure" name="secure" value="">

<强> JavaScript的：

<script>
var els = document.getElementsByClassName("secure");
Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
    el.setAttribute('123456');
});
</script>

Answer 3

您需要为每个元素添加一个类，因为文档中的不允许重复ID 。因此，我们可以更好地保留元素的公共类[我也更改了元素ID以保持唯一]。 getElementsByClassName()返回DOM的nodeList。我们遍历元素并放置一些值。最后用于测试我通过id打印值。

<input type="hidden" id="secure1" name="secure" value="" class="secure">
<input type="hidden" id="secure2" name="secure" value="" class="secure">
<input type="hidden" id="secure3" name="secure" value="" class="secure">
<input type="hidden" id="secure4" name="secure" value="" class="secure">

<script>
var list = document.getElementsByClassName("secure");
for(var i = 0; i< list.length;i++){
	document.getElementsByClassName("secure")[i].value='123456'
}
console.log(document.getElementById('secure2').value);
</script>

Answer 4

不要使用相同的id多个朋友时间。使用class而不是id。要查看结果，请从HTML中删除type="hidden"。

＆＃13;

var list = document.getElementsByClassName("secure");
for (var i = 0; i < list.length; i++) {
 list[i].setAttribute("value", "12345");
}

＆＃13;

<input name="secure" value="" class="secure" />
<input name="secure" value="" class="secure" />
<input name="secure" value="" class="secure" />
<input name="secure" value="" class="secure" />

＆＃13;

Answer 5

这样做 - 需要按类引用，然后循环遍历所有元素以实际更改值。

＆＃13;

<div><input type="text" class="secure" id="secure1" name="secure" value="123456"></div>
<div><input type="text" class="secure" id="secure2" name="secure" value="123456"></div>
<div><input type="text" class="secure" id="secure3" name="secure" value="123456"></div>
<div><input type="text" class="secure" id="secure4" name="secure" value="123456"></div>

<script>
function myFunction() {
    x=document.getElementsByClassName("secure");
		for (i = 0; i < x.length; i++) {
    	x[i].value="100";
    }
}
</script>

<button onclick="myFunction()">
click me
</button>

＆＃13;

在javascript中更改具有相同ID的所有输入值

5 个答案: