通过 class javascript 中文本框的名称获取所有元素
get all elements by class name of text boxes in javascript
我的 javascript 页面上有几个带有 class textID 的文本框。所以如果我要这样做
function UpdateTotals() {
getText = document.getElementsByClassName('textID').value;
}
所有值都是数字,那么如何将 class 中的所有值相加?示例:有 4 个文本框,每个文本框都包含数字 2。我想通过将它们全部加在一起得到 8(但只有 class 中的文本框)。
一个例子可以使用 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">
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/
我的 javascript 页面上有几个带有 class textID 的文本框。所以如果我要这样做
function UpdateTotals() {
getText = document.getElementsByClassName('textID').value;
}
所有值都是数字,那么如何将 class 中的所有值相加?示例:有 4 个文本框,每个文本框都包含数字 2。我想通过将它们全部加在一起得到 8(但只有 class 中的文本框)。
一个例子可以使用 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">
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/