Question

我想知道如何使用javascript从具有相同名称的html文本框中获取多个值并获得总和？如果可能，请使用易于理解的简单循环方法

Answer 1

您可以使用纯JavaScript执行类似的操作：

var sum = 0;
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
	var inputEle= document.getElementsByName("txt1");
    for(var i=0;i<inputEle.length;i++){
      //alert(inputEle[i].value);  //get each value
      sum = sum + parseInt(inputEle[i].value); // If you want the sum(only for numbers else you will see a string as output)
    }
    alert("Total Sum = "+sum);

});

<input type="text" name="txt1"/>
<input type="text" name="txt1"/>
<input type="text" name="txt1"/>
<input type="text" name="txt1"/>
<input type="text" name="txt1"/>

<button id="btn" class="getVal">Click here</button>

Answer 2

documet.getElementsByName（）返回给定名称之外的所有元素。
只需这样做，然后循环元素
东西这个

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

然后获取值

var texts = document.getElementsByName("n");
var sum = "";
for( var i = 0; i < texts.length; i ++ ) {
    var n = texts[i].value || 0;
    sum = sum + n;
}
alert(sum);

试试这个JSFiddle示例

Answer 3

var sum = 0,
    inputs = document.getElementsByName("name");

// inputs is not an array, but a nodelist, it doesn't have
// a forEach method: http://stackoverflow.com/questions/16053357/
[].forEach.call(inputs, function(input) {
    sum += parseInt(input.value);
});

Answer 4

据我所知，我会尽量回答你的问题。

var len = document.getElementsByName（＆＃39; text＆＃39;）。length;


for（i = 0; i＆lt; len; i ++）

     {

     //使用每个值。 document.getElementsByName（＆＃39;文本＆＃39;）[I]。价值
     }

您尚未指定如何使用该值，因此请在循环中使用此行：

document.getElementsByName（＆＃39;文本＆＃39;）[I]。价值希望有所帮助。

Answer 5

试试这个

<html>
<head>
<script> // script to retrieve all checked value by name
function print_multi_tc(name){
var formblockk;
var forminputss;
var ref_arr=[];
var v=0;
formblockk= document.getElementById('form_id');
forminputss = formblock.getElementsByTagName('input');//retrieve by tag
var arr_len=forminputss.length;
for (i = 0; i < arr_len; i++) {
var regex = new RegExp(name, "i");
if (forminputs[i].checked==true)
{
ref_arr[v]  =forminputs[i].value;//array contains all the checked value
 v++;
}
}
}
</script>
</head>
<body>
<form id="form_id">
<input type="checkbox" name="areaa[]">
<input type="checkbox" name="areaa[]">
<input type="checkbox" name="areaa[]">
<input type="checkbox" name="areaa[]">//name as much you need 
</form>
</body>
</html>

Answer 6

function myFunction() {
	var texts = document.getElementsByName("n");
    var sum = 0;
    for( var i = 0; i < texts.length; i ++ ) {
      var aa=parseFloat(texts[i].value);
      if(aa=="NaN" || aa==null || aa==""){aa=parseFloat("0");}
        sum = sum + aa;
    }
    document.getElementById("sum").innerHTML = sum;
}

<input type="text" name="n" onKeyUp="myFunction();" value="0"/><br>
<input type="text" name="n" onKeyUp="myFunction();" value="0"/><br>
<input type="text" name="n" onKeyUp="myFunction();" value="0"/><br>
<input type="text" name="n" onKeyUp="myFunction();" value="0"/><br>
<p id="sum"></p>
<button onClick="myFunction();"> Get Sum</button>

获取使用相同名称

6 个答案: