javascript 使用javascript为多个输入框赋值?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16355959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 04:19:21  来源:igfitidea点击:

Assign value for multiple input boxes using javascript?

javascriptjqueryarrays

提问by Nathan Srivi

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.

嗨,我在为多个输入框分配单个值时遇到问题。我正在尝试多种方法,但它只分配了 1 个文本框。如何分配多个文本框。

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?

任何人都可以帮忙吗?

回答by dsgriffin

It only assigns a value to one of because ID's should be unique; therefore you're only actually going to end up targetting the first one with that value assignment.

它只为其中之一分配一个值,因为 ID 应该是唯一的;因此,您实际上只会最终以具有该值分配的第一个为目标。

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');

$('.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 在这里。

回答by Gung Foo

The idattribute is supposed to be unique so having the same idseveral times is invalid htmland most browsers will simply ignore any inputs with ids that already exist int he dom tree.

id属性应该是唯一的,因此id多次使用相同的html无效的 html,并且大多数浏览器将简单地忽略任何id已存在于 dom 树中的带有s 的输入。

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');

回答by a better oliver

First of all ids are supposed to be unique. So add a classor nameattribute instead. But your main problem is here:

首先,id 应该是唯一的。所以添加一个classorname属性。但你的主要问题在这里:

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.

您已经拥有该元素,无需再次查找。

回答by pramod

Put your input boxes in a div container with an ID or Class. Then use the following code.

将输入框放入带有 ID 或类的 div 容器中。然后使用下面的代码。

$('#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. This code will find you all input text boxes in that particular div container and assign your value to them.

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