Question

您好我在为多个输入框分配单个值时遇到问题。我尝试了很多方法但它只分配了一个文本框。如何分配多个文本框。

注意：我对所有输入框都有相同的ID。

我的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getInputs()
{
  var inputs = document.getElementsByTagName('input');
  var ids = new Array();
  for(var i = 0; i < inputs.length; i++)
  {
    if(inputs[i].getAttribute('id').toLowerCase()== 'myid')
    {       
       document.getElementsById('myid').value="1";
    }
  }   
}    
window.onload = getInputs;
</script>
</head>
<body>
<form>
  <input type="text"  id="myid"><br>
  <input type="text"  id="myid"><br>
  <input type="text"  id="myid"><br>
  <input type="text"  id="myid"><br>
</form>
</body>
</html>

有人可以帮忙吗？

Answer 1

它只为一个值赋值，因为ID应该是唯一的;因此，您实际上最终只会使用该值分配来定位第一个。

更改HTML以改为使用类：

<input type="text"  class="myids"><br>
<input type="text"  class="myids"><br>
<input type="text"  class="myids"><br>
<input type="text"  class="myids"><br>

然后，您可以相应地调整您的JavaScript。

<强>的jQuery

在jQuery中，您可以使用：

设置一个值

$('.myids').val('value for all of them here');

jQuery jsFiddle here.

纯JavaScript

在Javascript中，您使用getElementsByClassName()并迭代它们，为它们提供相同的值。

var x = document.getElementsByClassName('myids');
for(i = 0; i < x.length; i++) {
  x[i].value = "New!";
}

<强> Pure JavaScript jsFiddle here.

Answer 2

id属性应该是唯一的，因此多次使用相同的id 无效的html ，大多数浏览器只会忽略id的所有输入已经存在于他的树上。

旁注：要设置几个ID的值（通过jquery），请使用val()函数和一个选择所有相应输入的选择器（它看起来更清晰，以便在单行中使用坚持纯粹的javascript）：

$('#myid1, #myid2, .myclass1').val('new value');

Answer 3

首先，id应该是唯一的。因此，请添加class或name属性。但你的主要问题是：

document.getElementsById('myid').value="1";

应该是

inputs[i].value="1";

您已经拥有该元素，无需再次找到它。

Answer 4

将输入框放入具有ID或Class的div容器中。然后使用以下代码。

$('#divID').find('input:text').val('your value');

或

$('.divClass').find('input:text').val('your value');

如果您将ID用于div，则将第一个用于，将第二个用于类作为选择器。此代码将在特定的div容器中找到所有输入文本框，并为它们分配值。

使用javascript为多个输入框分配值？

4 个答案: