Question

我的页面中有一个名为＆＃34; myField＆＃34;现在这是动态的，所以有两种情况，即它只能是1个字段;

<input type="text" name="myField" />

或者可以有以下两个字段;

<input type="text" name="myField" />
<input type="hidden" name="myField" />

我使用以下代码访问JS中的值;

document.forms[0].myField[0].value

但是，如果只有一个字段（如第一种情况），则不起作用

如何编写动态JS代码来处理相同的问题？它应该是跨浏览器兼容的。

Answer 1

＆＃13;

document.getElementById("btn").addEventListener("click", function() {
	var texts = document.getElementsByName("n");
    var sum = "";
    for( var i = 0; i < texts.length; i ++ ) {
        sum = sum + texts[i].value;
    }
    document.getElementById("sum").innerHTML = sum;
});

＆＃13;

<input type="text" name="n"/>
<input type="text" name="n"/>
<p id="sum"></p>
<button id="btn"> Get Sum</button>

＆＃13;

或访问：How get total sum from input box values using Javascript?

Answer 2

乍一看这个特定的例子，这两个字段具有相同的名称似乎很奇怪。通常人们会期望相互排斥的字段具有相同的名称，或者它们是相同的类型并形成列表。

但你仍然可以使用它们：我不会使用自动属性，因为你发现它们是不一致的（document.forms[0].myField将是只有一个字段的字段，而是一组字段如果有多个，则使用相同的名称）。我使用querySelectorAll：

var fields = document.querySelectorAll('[name="myField"]');

fields可靠地成为一个列表。您可以使用fields[0]等访问该列表的元素，并从fields.length获取长度。

var fields = document.querySelectorAll('[name="myField"]');
for (var n = 0; n < fields.length; ++n) {
  console.log("fields[" + n + "].value: ", fields[n].value);
}

<input type="text" name="myField" value="the text field"/>
<input type="hidden" name="myField" value="the hidden field"/>

获取单个/多个文本框值

2 个答案: