JavaScript 数组对象获得input输入框的值，并设置

约定不等于承诺〃 2022-08-18 13:22 189阅读 0赞

HTML界面开发过程中遇到需要对多行的输入框的数值计算，然后设置某个HTML元素的值。

**（一）、通过JS代码增加一列，会重新计算总数。**

1、input输入框定义数组name

<span style="font-size:18px;"><tr>
    <td><input type="text" class="input-small name" name="money[]" οnblur="sumMoney()" readonly/></td>    // 每行金额的值
    <td><input type="text" class="input-small name" name="sum[]" readonly="readonly"/></td>   // 总金额
    </tr></span>

2、在JS代码中

<span style="font-size:18px;">function sumMoney(){
            var sum = 0;
            // 循环遍历读取每个input标签的值，并计算总数
            $('input[name="money[]"]').each(function(){
                sum = parseInt(sum)+ parseInt($(this).val());
            });
    
            // 对多个sum的input标签设置总金额
            $('input[name="sum[]"]').each(function(){
                $(this).val(sum);
            });
    }</span>

3、最后 input标签onblur事件在失去焦点时触发该函数。

完成。

**（二）、循环获得input输入框的值的 方法**

**(该代码是在处理上传多个文件时，判断是否有选择文件写的)**

<span style="font-size:18px;">JS代码如下：
    // input的 name属性(名字取值一样即可)
    $("input[name='file-name']").each(function(){
          alert($(this).val());
          return false;     // 返回false停止each循环
    });
    // input的 class属性
    $("input[class='file-input']").each(function(){
          alert($(this).val());
    });</span>

HTML代码如下：