Question

我有像这样的输入字段

<input id="nilai" name="nilai" type="text" value="10" readonly />
<input id="nilai" name="nilai" type="text" value="10" readonly/>
<input id="nilai" name="nilai" type="text" value="10" readonly/>
<input id="nilai" name="nilai" type="text" value="10" readonly/>
<input id="nilai" name="nilai" type="text" value="10" readonly/>

如何在javascript中对同一个id中的文本字段求和？

JS

<script type="text/javascript">
$("#total").val(nilai);
<script>

Answer 1

var total = 0
$('input[name="nilai"]').each(function(){
   total+=parseInt($(this).val())
})
console.log(total)

Answer 2

首先，不应该出现相同的ID。所以用class

替换它们

<input class="nilai" name="nilai" type="text" value="10" readonly />
// (...) more elements

然后你可以做

var str = $('.nilai').map(function(){
   return +$(this).val();
}).get().reduce(function(p, c){ return p + c;  })

$('#total').val(str);

如果您不想使用我的建议，只需将选择器更改为属性选择器[name=nilai]。

Answer 3

您还可以像这样连接所有文本框id="nilai"的文本：

var total = "";
var l = parseInt($("#nilai").length);

for(var i=1;i<=l;i++){
    total += $("#nilai:nth-child('" + i + "')").val();
}

Answer 4

不要使用重复的ID;它们会导致HTML无效。请改用一个班级。除非绝对必要，否则不要使用重复的名称。

var sum = 0;
$('.nilai').each(function() {
     sum += +this.value;
});
alert( sum ); //Result '50'

＆＃13;

var sum = 0;
$('.nilai').each(function() {
  sum += +this.value;
});
alert( sum );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="nilai" name="nilai" type="text" value="10" readonly />
<input class="nilai" name="nilai" type="text" value="10" readonly/>
<input class="nilai" name="nilai" type="text" value="10" readonly/>
<input class="nilai" name="nilai" type="text" value="10" readonly/>
<input class="nilai" name="nilai" type="text" value="10" readonly/>

＆＃13;

如何在同一个id中汇总文本字段？

4 个答案: