简体   繁体   English

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

[英]Assign value for multiple input boxes using javascript?

Hi I have a problem in assign single values to multiple input boxes. 嗨我在为多个输入框分配单个值时遇到问题。 i am trying many ways but it assign only 1 text box. 我尝试了很多方法但它只分配了一个文本框。 How can I assign multiple text boxes. 如何指定多个文本框。

Note: I have the same ID for all input boxes. 注意:我对所有输入框都有相同的ID。

My code is given below 我的代码如下

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

Can anyone help? 有人可以帮忙吗?

It only assigns a value to one of because ID's should be unique; 它只为一个值赋值,因为ID应该是唯一的; therefore you're only actually going to end up targetting the first one with that value assignment. 因此,您实际上最终只会使用该值分配来定位第一个。

Change your HTML to use a class instead: 更改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>

Then, you can adapt your JavaScript accordingly. 然后,您可以相应地调整您的JavaScript。


jQuery jQuery的

in jQuery, you could then set a value using: 在jQuery中,您可以使用以下方法设置值:

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

jQuery jsFiddle here. jQuery jsFiddle在这里。


Pure JavaScript 纯JavaScript

In Javascript, you'd use getElementsByClassName() and iterate through them, giving them the same value. 在Javascript中,您将使用getElementsByClassName()并遍历它们,为它们提供相同的值。

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

Pure JavaScript jsFiddle here. 纯JavaScript jsFiddle在这里。

The id attribute is supposed to be unique so having the same id several times is invalid html and most browsers will simply ignore any inputs with id s that already exist int he dom tree. id属性应该是唯一的,因此多次具有相同的id无效的html,并且大多数浏览器将简单地忽略任何具有id s的输入,这些输入已经存在于dom树中。

Sidenote: To set the value of several ids (via jquery) use the val() function and a selector that selects all respective inputs like this (it looks alot more cleaner to have this in a one-liner as opposed to sticking to pure javascript): 旁注:要设置几个id的值(通过jquery),使用val()函数和一个选择所有相应输入的选择器(它看起来更简洁,只需坚持纯粹的javascript ):

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

First of all ids are supposed to be unique. 首先,id应该是唯一的。 So add a class or name attribute instead. 因此,请添加classname属性。 But your main problem is here: 但你的主要问题是:

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

It should be 它应该是

inputs[i].value="1";

You already have the element, there is no need to find it again. 你已经有了元素,没有必要再找到它。

Put your input boxes in a div container with an ID or Class. 将输入框放在带有ID或Class的div容器中。 Then use the following code. 然后使用以下代码。

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

or 要么

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

The first one is used for if you are using ID for the div and the second one is for the class as the selector. 第一个用于如果您使用ID作为div,第二个用于作为选择器的类。 This code will find you all input text boxes in that particular div container and assign your value to them. 此代码将在该特定div容器中找到所有输入文本框,并为其分配值。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM