更改 id= 值的所有元素

Question

我有一个由 php for 循环生成的输入按钮。

这是它的输出：

<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">

如何更改 ID 或名称为 "submit" 的所有输入的值？

我试过 getElementById 但只改变了输入：

<script>
var submit_button = document.getElementById('submit');
submit_button.value = 'Next';
</script>

我试过 getElementsByName 但根本没用：

<script>
var submit_button = document.getElementsByName('submit');
submit_button.value = 'Next';
</script>

如何更改所有 input 的值？

我想要普通的 javascript。如果不能使用常规 javascript，jquery 也可以。

Answer 1

ID 必须是唯一的，所以更改它们。

您可以使用 document.getElementsByName. Because this returns a NodeList you can use the Array.forEach 来更改值属性。

document.getElementsByName('submit').forEach(function(ele, idx) {
   ele.value = 'Next';
})

<input type="submit" name="submit" id="submit1" value="Submit">
<input type="submit" name="submit" id="submit2" value="Submit">
<input type="submit" name="submit" id="submit3" value="Submit">
<input type="submit" name="submit" id="submit4" value="Submit">
<input type="submit" name="submit" id="submit5" value="Submit">
<input type="submit" name="submit" id="submit6" value="Submit">
<input type="submit" name="submit" id="submit7" value="Submit">
<input type="submit" name="submit" id="submit8" value="Submit">

Answer 2

您可以像这样使用 jquery：

$("#submit").val("Next");

Answer 3

你可以使用 class 而不是使用，因为 id 是唯一的，正如@RiggsFolly 建议的那样，所以你可以添加一个 class 例如 class="btn" 并且在你的 js 块中你可以说:

var x = document.getElementsByClassName("btn");

var x = document.getElementsByClassName("btn");
    
    for(i=0; i<x.length; i++){
     x[i].value = "next";
    }

<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">

Answer 4

在jQuery中：

$('input[name=submit]').val('Next');

或者在原版 JS 中：

document.querySelectorAll('input[name=submit]').forEach(function(node){
    node.value = 'Next'
});

或者为了缩短实际调用时间，将 querySelectorAll 放入可重用的实用函数中：

function $$(selector, ctx=document){
    return Array.from(ctx.querySelectorAll(selector));
}


$$('input[name=submit]').forEach(function(node){
    node.value = 'Next';
});

为什么要将其包装到数组中？ querySelectorAll returns 一个 NodeList，而不是一个数组，因此它提供了 forEach，但它不提供数组所具有的所有其他简洁的小功能，例如 filter，map, slice 等

Answer 5

id 应该是唯一的，getElementById 将 return 只有一个元素。

相反，您应该在标签上使用 class 属性并使用 getElementsByClassName 获取列表。此 return 是一个集合，您可以使用 for 循环对其进行迭代。

for ( element in document.getElementsByClassName("submit") )
  element.value = "Next"

更改 id= 值的所有元素

Change all elements with id='s value

javascript

php

jquery

getelementbyid

getelementsbyname