通过javascript中文本框的类名称获取所有元素

如何解决通过javascript中文本框的类名称获取所有元素

我的javascript页面上有几个带有textID类的文本框。所以如果我要做

function UpdateTotals() {
    getText = document.getElementsByClassName('textID').value;
}

所有值都是数字，那么如何将此类中的所有值加在一起？示例：有4个文本框，每个文本框中都有数字2。我想通过将它们全部加在一起得到8（但只能是该类中的文本框）。

解决方法

一个示例可能是使用Array.prototype.reduce()

const textID = document.querySelectorAll('.textID');
const total = [...textID].reduce((a,el) => a + (+el.textContent.trim()),0);

console.log(total);   // 8

<div class="textID">2</div>
<div class="textID">2</div>
<div class="textID">2</div>
<div class="textID">2</div>

对于INPUT元素：

const textID = document.querySelectorAll('.textID');
const total = [...textID].reduce((a,el) => a + (+el.value),0);

console.log(total);   // 8

<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">

使用NodeList.forEach()

const textID = document.querySelectorAll('.textID');
let total = 0;

textID.forEach(el => total += +el.value);

console.log(total);   // 8

<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">

,

尝试以下代码：

HTML代码：

<input type="checkbox" class="textID" name="qty" value="2"/> 2<br>
<input type="checkbox" class="textID" name="qty" value="2"/> 2<br>
<input type="checkbox" class="textID" name="qty" value="2"/> 2<br>
<input type="checkbox" class="textID" name="qty" value="2"/> 2<br>
<br><br>
Total : <input type="text" name="total" id="total"/>

<a href="javascript:sumInputs()">Sum</a>

JS代码：

window.sumInputs = function() {
    var inputs = document.getElementsByClassName('textID'),result = document.getElementById('total'),checkboxes = document.querySelectorAll(`input[name="qty"]:checked`),sum = 0;
        
    for(var i=0; i<checkboxes.length; i++) {
        var ip = inputs[i];
    
        if (ip.name && ip.name.indexOf("total") < 0) {
            sum += parseInt(ip.value) || 0;
        }
    
    }
    
    result.value = sum;
}

在jsfiddle中尝试：https://jsfiddle.net/u62tyj45/