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 。因为这会返回NodeList，您可以使用Array.forEach来更改值属性。

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 2

您可以像这样使用jquery：

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

Answer 3

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

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

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返回一个NodeList，而不是一个数组，因此它提供forEach，但它不提供数组所做的所有其他整洁的小函数，如filter，map ，slice等。

Answer 5

id应该是唯一的，getElementById只返回一个元素。

相反，您应该在标签上使用class属性并使用getElementsByClassName获取列表。这将返回一个集合，您可以使用for循环来迭代它。

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

更改id ='s值的所有元素

5 个答案: