我想在 javascript 中选中复选框时对数字求和
I want to sum numbers when a checkbox is checked in javascript
我想对数字求和并在跨度内将它们打印出来,我尝试使用 innerHTML 但因为它是一个字符串我不能,我尝试了 parseInt、parseFloat、Number 但什么也没有。对于所有选中的复选框,我希望它的值的总和进入跨度,而那些未选中的我不希望它们在跨度中得到总和
(我减少了 table 和很多数字,因为把它放在这里太长了,所以想象一下我想对很多总数求和)
const offersCheckbox = document.querySelectorAll("#checkbox-offers");
const recalculateText = document.querySelector(".recalculate-text");
const checkboxTotal = document.querySelectorAll("#checkbox-total");
let total = 0;
for (let i = 0; i < offersCheckbox.length; i++) {
offersCheckbox[i].addEventListener("click", (e) => {
if (offersCheckbox[i].checked === true) {
recalculateText.innerHTML = "recalculate invoice total";
} else {
recalculateText.innerHTML = "";
}
});
}
<table>
<tr>
<tr>
<td>
<input type="checkbox" name="checkbox" id="checkbox-offers" value="2,434.38" />
<td>
<div class="price-container text-bold" id="checkbox-total">
<b>$</b>2,434.38
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox" id="checkbox-offers" value="76.69" />
</td>
<td>
<div class="price-container text-bold" id="checkbox-total">
<b>$</b>76.69
</div>
</td>
</tr>
</table>
<span class="recalculate-text text-right text-underline"></span>
$('input[type="checkbox"]').change(function() {
var checkArray = [];
var total = 0;
$("input:checkbox[name=checkbox]:checked").each(function(key){
checkArray.push($(this).val());
});
if(checkArray.length !== 0) {
total = checkArray.reduce(function(a, b){
return parseInt(a) + parseInt(b);
}, );
$(".recalculate-text").text(total);
}
});
根据修复您已有的代码:
- id 是唯一的,所以使用
checkbox-offers
作为 class 和 querySelectorAll
因为你已经有了循环
- Js 数字中没有
,
,因此您需要清除它们以获得具有数学功能的数字
- 在你的循环中你有
(e)
表示事件,所以使用 e.target
来定位 event
并归档并获取它的 value
。
- 与
offersCheckbox[i]
你只是 addEventListener
然后你使用 e.target
- 您需要使用
parseFloat(num)
将值转换为数字
- 当插入值时你需要考虑已经添加的值,如果有一个,如果没有解析为0,如果有一些解析为数字并添加加法:
- 如果你想添加 back 作为结果的千分之一分隔符,这里有很多答案,只需搜索它们。
recalculateText.innerHTML = (parseFloat(recalculateText.innerHTML ||
0) + num2)
const offersCheckbox = document.querySelectorAll(".checkbox-offers");
const recalculateText = document.querySelector(".recalculate-text");
let total = 0;
for (let i = 0; i < offersCheckbox.length; i++) {
offersCheckbox[i].addEventListener("click", (e) => {
let num = e.target.value.split(",").join("")
let num2 = parseFloat(num)
if (e.target.checked === true) {
recalculateText.innerHTML = (parseFloat(recalculateText.innerHTML || 0) + num2)
} else {
recalculateText.innerHTML = "";
}
});
}
<table>
<tr>
<tr>
<td>
<input type="checkbox" class="checkbox-offers" name="checkbox" value="2,434.38" />
<td>
<div class="price-container text-bold" id="checkbox-total">
<b>$</b>2,434.38
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox-offers" name="checkbox" value="76.69" />
</td>
<td>
<div class="price-container text-bold" id="checkbox-total">
<b>$</b>76.69
</div>
</td>
</tr>
</table>
<span class="recalculate-text text-right text-underline"></span>
有用的链接:
What do querySelectorAll and getElementsBy* methods return?
How to print a number with commas as thousands separators in JavaScript
What properties can I use with event.target?
How to convert a string to an integer in JavaScript?
请注意,您需要利用输入字段的事件处理程序系统,在本例中 onchange
每个输入字段处理修改每个价格总和的存储值。
我确实通过正则表达式将货币写入数字标准化器,但是我没有将数字写入货币格式化程序,以将总和重新格式化回货币。您需要自己处理。
let sum = 0;
let addPrice = (elem) => {
let value = parseFloat(elem.value.replace(/$|,/g, ''), 2);
elem.checked ? (sum += value) : (sum -= value);
document.getElementById('result').innerHTML = sum;
};
<table>
<tr>
<tr>
<td>
<input type="checkbox" name="price" value="2,434.38" onchange="addPrice(this)" />
<td>
<div class="price-container text-bold">
<b>$</b>2,434.38
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price" value="76.69" onchange="addPrice(this)" />
</td>
<td>
<div class="price-container text-bold">
<b>$</b>76.69
</div>
</td>
</tr>
</table>
<div class="recalculate-text text-right text-underline">Total: <span id="result">0</span></div>
我没有对您的原始代码进行太多更改。查看评论以了解我所做的更改,如果您有其他问题,请随时发表评论。
const recalculateText = document.querySelector(".recalculate-text");
const checkboxContainer = document.querySelector("#checkbox-container");
let total = 0;
// Create a number formatter to print out on the UI - this is a better approach than regex IMO.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
//Notice the use of event delegation here - meaning I only added 1 single event handler to a single DOM element
//Read this blog for more on event delegation and why it's useful: https://davidwalsh.name/event-delegate
checkboxContainer.addEventListener('change', e => {
//Also notice that I am listening for the change event, instead of the click event.
//See here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
if (e.target.tagName == "INPUT") {
const floatValue = parseFloat(e.target.value);
if (e.target.checked) {
total += floatValue;
} else {
total -= floatValue;
}
}
recalculateText.innerHTML = formatter.format(total);
});
<!-- Notice I added a parent div to enable use to use event delegation technique -->
<!-- Also notice I removed element id attributes where they were not needed. Also be sure
to always use unique id values for every element - duplicate ids are not allowed, it will
lead to bugs. If elements need to be considered part of the same "group" then you should use
the class attribute. -->
<div id="checkbox-container">
<table>
<tr>
<tr>
<td>
<!-- Notice I removed the comma from the value attribute -->
<input type="checkbox" name="checkbox" value="2434.38" />
<td>
<div class="price-container text-bold">
<b>$</b>2,434.38
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox" value="76.69" />
</td>
<td>
<div class="price-container text-bold">
<b>$</b>76.69
</div>
</td>
</tr>
</table>
</div>
<span class="recalculate-text text-right text-underline"></span>
我想对数字求和并在跨度内将它们打印出来,我尝试使用 innerHTML 但因为它是一个字符串我不能,我尝试了 parseInt、parseFloat、Number 但什么也没有。对于所有选中的复选框,我希望它的值的总和进入跨度,而那些未选中的我不希望它们在跨度中得到总和
(我减少了 table 和很多数字,因为把它放在这里太长了,所以想象一下我想对很多总数求和)
const offersCheckbox = document.querySelectorAll("#checkbox-offers");
const recalculateText = document.querySelector(".recalculate-text");
const checkboxTotal = document.querySelectorAll("#checkbox-total");
let total = 0;
for (let i = 0; i < offersCheckbox.length; i++) {
offersCheckbox[i].addEventListener("click", (e) => {
if (offersCheckbox[i].checked === true) {
recalculateText.innerHTML = "recalculate invoice total";
} else {
recalculateText.innerHTML = "";
}
});
}
<table>
<tr>
<tr>
<td>
<input type="checkbox" name="checkbox" id="checkbox-offers" value="2,434.38" />
<td>
<div class="price-container text-bold" id="checkbox-total">
<b>$</b>2,434.38
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox" id="checkbox-offers" value="76.69" />
</td>
<td>
<div class="price-container text-bold" id="checkbox-total">
<b>$</b>76.69
</div>
</td>
</tr>
</table>
<span class="recalculate-text text-right text-underline"></span>
$('input[type="checkbox"]').change(function() {
var checkArray = [];
var total = 0;
$("input:checkbox[name=checkbox]:checked").each(function(key){
checkArray.push($(this).val());
});
if(checkArray.length !== 0) {
total = checkArray.reduce(function(a, b){
return parseInt(a) + parseInt(b);
}, );
$(".recalculate-text").text(total);
}
});
根据修复您已有的代码:
- id 是唯一的,所以使用
checkbox-offers
作为 class 和querySelectorAll
因为你已经有了循环 - Js 数字中没有
,
,因此您需要清除它们以获得具有数学功能的数字 - 在你的循环中你有
(e)
表示事件,所以使用e.target
来定位event
并归档并获取它的value
。 - 与
offersCheckbox[i]
你只是addEventListener
然后你使用e.target
- 您需要使用
parseFloat(num)
将值转换为数字
- 当插入值时你需要考虑已经添加的值,如果有一个,如果没有解析为0,如果有一些解析为数字并添加加法:
- 如果你想添加 back 作为结果的千分之一分隔符,这里有很多答案,只需搜索它们。
recalculateText.innerHTML = (parseFloat(recalculateText.innerHTML || 0) + num2)
const offersCheckbox = document.querySelectorAll(".checkbox-offers");
const recalculateText = document.querySelector(".recalculate-text");
let total = 0;
for (let i = 0; i < offersCheckbox.length; i++) {
offersCheckbox[i].addEventListener("click", (e) => {
let num = e.target.value.split(",").join("")
let num2 = parseFloat(num)
if (e.target.checked === true) {
recalculateText.innerHTML = (parseFloat(recalculateText.innerHTML || 0) + num2)
} else {
recalculateText.innerHTML = "";
}
});
}
<table>
<tr>
<tr>
<td>
<input type="checkbox" class="checkbox-offers" name="checkbox" value="2,434.38" />
<td>
<div class="price-container text-bold" id="checkbox-total">
<b>$</b>2,434.38
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox-offers" name="checkbox" value="76.69" />
</td>
<td>
<div class="price-container text-bold" id="checkbox-total">
<b>$</b>76.69
</div>
</td>
</tr>
</table>
<span class="recalculate-text text-right text-underline"></span>
有用的链接:
What do querySelectorAll and getElementsBy* methods return?
How to print a number with commas as thousands separators in JavaScript
What properties can I use with event.target?
How to convert a string to an integer in JavaScript?
请注意,您需要利用输入字段的事件处理程序系统,在本例中 onchange
每个输入字段处理修改每个价格总和的存储值。
我确实通过正则表达式将货币写入数字标准化器,但是我没有将数字写入货币格式化程序,以将总和重新格式化回货币。您需要自己处理。
let sum = 0;
let addPrice = (elem) => {
let value = parseFloat(elem.value.replace(/$|,/g, ''), 2);
elem.checked ? (sum += value) : (sum -= value);
document.getElementById('result').innerHTML = sum;
};
<table>
<tr>
<tr>
<td>
<input type="checkbox" name="price" value="2,434.38" onchange="addPrice(this)" />
<td>
<div class="price-container text-bold">
<b>$</b>2,434.38
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="price" value="76.69" onchange="addPrice(this)" />
</td>
<td>
<div class="price-container text-bold">
<b>$</b>76.69
</div>
</td>
</tr>
</table>
<div class="recalculate-text text-right text-underline">Total: <span id="result">0</span></div>
我没有对您的原始代码进行太多更改。查看评论以了解我所做的更改,如果您有其他问题,请随时发表评论。
const recalculateText = document.querySelector(".recalculate-text");
const checkboxContainer = document.querySelector("#checkbox-container");
let total = 0;
// Create a number formatter to print out on the UI - this is a better approach than regex IMO.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
//Notice the use of event delegation here - meaning I only added 1 single event handler to a single DOM element
//Read this blog for more on event delegation and why it's useful: https://davidwalsh.name/event-delegate
checkboxContainer.addEventListener('change', e => {
//Also notice that I am listening for the change event, instead of the click event.
//See here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
if (e.target.tagName == "INPUT") {
const floatValue = parseFloat(e.target.value);
if (e.target.checked) {
total += floatValue;
} else {
total -= floatValue;
}
}
recalculateText.innerHTML = formatter.format(total);
});
<!-- Notice I added a parent div to enable use to use event delegation technique -->
<!-- Also notice I removed element id attributes where they were not needed. Also be sure
to always use unique id values for every element - duplicate ids are not allowed, it will
lead to bugs. If elements need to be considered part of the same "group" then you should use
the class attribute. -->
<div id="checkbox-container">
<table>
<tr>
<tr>
<td>
<!-- Notice I removed the comma from the value attribute -->
<input type="checkbox" name="checkbox" value="2434.38" />
<td>
<div class="price-container text-bold">
<b>$</b>2,434.38
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox" value="76.69" />
</td>
<td>
<div class="price-container text-bold">
<b>$</b>76.69
</div>
</td>
</tr>
</table>
</div>
<span class="recalculate-text text-right text-underline"></span>