Question

我有像这样的输入字段

<input  name="unittotal[]" type="text" id="unittotal[]" onchange="sumofunittotal();" size="3"  />
<input  name="unittotal[]" type="text" id="unittotal[]"  onchange="sumofunittotal();"  size="3"  />
<input  name="unittotal[]" type="text" id="unittotal[]"   onchange="sumofunittotal();" size="3"  />
<input  name="unittotal[]" type="text" id="unittotal[]"   onchange="sumofunittotal();"  size="3"  />

。。

<input name="total" type="text" id="total" value="">

如果我在unittotal字段中输入值onchange，则最终文本框值应为使用javascript的单位总和的总和。

Answer 1

Here's the working demo为你。

您不需要为HTML元素使用重复的id值。请考虑使用类名。请参阅标记和计算总计的代码。我希望它不言自明。

<强> JavaScript的：

function updateTotal() {
    var total = 0;//
    var list = document.getElementsByClassName("input");
    var values = [];
    for(var i = 0; i < list.length; ++i) {
        values.push(parseFloat(list[i].value));
    }
    total = values.reduce(function(previousValue, currentValue, index, array){
        return previousValue + currentValue;
    });
    document.getElementById("total").value = total;    
}

<强> HTML：

<input type="text"  class='input' value="0" onchange='updateTotal();'>
<input type="text"  class='input' value="0" onchange='updateTotal();'>
<input type="text"  class='input' value="0" onchange='updateTotal();'>
<input type="text"  class='input' value="0" onchange='updateTotal();'>

<input name="total" type="text" id="total" value="">

Answer 2

像这样：

<input type="text" size="3" class="add" />
<input type="text" size="3" class="add" />
<input type="text" size="3" class="add" />
<input type="text" size="3" class="add" />
<hr>
<input type="text" size="3" id="sum" />

和javascript：

(function () {

    var elms = document.querySelectorAll('.add'),
        arr = Array.prototype.slice.call(elms),
        onChange = function () {
            var result = 0;
            arr.forEach(function (el) {
                result = result + +el.value;
            });

            document.getElementById('sum').value = result;
        };

    arr.forEach(function (el) {
        el.addEventListener('change', onChange);
    });

}());

http://jsfiddle.net/65b6T/

Answer 3

试试这个，并在小提琴DEMO中详细了解。 HTML

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
    <tr>
        <td width="40px">1</td>
        <td>
            <input class="txt" type="text" name="txt" />
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>
            <input class="txt" type="text" name="txt" />
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>
            <input class="txt" type="text" name="txt" />
        </td>
    </tr>
    <tr>
        <td>4</td>
        <td>
            <input class="txt" type="text" name="txt" />
        </td>
    </tr>
    <tr>
        <td>5</td>
        <td>
            <input class="txt" type="text" name="txt" />
        </td>
    </tr>
    <tr>
        <td>6</td>
        <td>
            <input class="txt" type="text" name="txt" />
        </td>
    </tr>
    <tr id="summation">

        <td align="left">Total :</td>
        <td align="left"><span id="sum">0</span>

        </td>
    </tr>
</table>

使用Javascript：

 $(document).ready(function () {

     //iterate through each textboxes and add keyup
     //handler to trigger sum event
     $(".txt").each(function () {

         $(this).keyup(function () {
             calculateSum();
         });
     });

 });

 function calculateSum() {

     var sum = 0;
     //iterate through each textboxes and add the values
     $(".txt").each(function () {

         //add only if the value is number
         if (!isNaN(this.value) && this.value.length != 0) {
             sum += parseFloat(this.value);
         }

     });
     //.toFixed() method will roundoff the final sum to 2 decimal places
     $("#sum").html(sum.toFixed(2));
 }

Answer 4

这是此解决方案的演示。 http://jsfiddle.net/jxJg7/1/ 笔记：仅当您的值为整数时才有效。我创建了一个强制用户只在输入上放置数字的函数确保删除重复的ID

<script type="text/javascript">
function sumofunittotal() {
    var total = 0;
    var cusid_ele = document.getElementsByClassName('inputtosum');
    for (var i = 0; i < cusid_ele.length; ++i) {
    if (!isNaN(parseInt(cusid_ele[i].value)) )
    total += parseInt(cusid_ele[i].value);  
    }
    document.getElementById('total').value=total;
}

function onlynumber(e) {
    if (e.shiftKey === true ) {
    if (e.which == 9) {
    return true;
    }
    return false;
    }
    if (e.which > 57) {
    return false;
    }
    if (e.which==32) {
    return false;
    }
    return true;
}
</script>

<input  name="unittotal[]" class="inputtosum" type="text" onchange="sumofunittotal();" onkeydown="return onlynumber(event);" size="3"  />
<input  name="unittotal[]" class="inputtosum" type="text" onchange="sumofunittotal();" onkeydown="return onlynumber(event);" size="3"  />
<input  name="unittotal[]" class="inputtosum" type="text" onchange="sumofunittotal();" onkeydown="return onlynumber(event);" size="3"  />
<input  name="unittotal[]" class="inputtosum" type="text" onchange="sumofunittotal();" onkeydown="return onlynumber(event);" size="3"  />
<input name="total" type="text" id="total" value="">

输入数组值使用javascript求和

4 个答案: