我想在javascript中选中复选框时求和

我想将这些数字相加并在span中打印出来，我尝试使用innerHTML，但由于它是一个字符串，所以我无法使用，我尝试了parseInt、parseFloat、Number和nothing。对于所有选中的复选框，我希望其值的总和进入范围，而那些未选中的值，我不希望它们在范围中得到总和

我减少了表格和很多数字，因为放在这里太长了，所以想象一下，我想对很多总数求和

const offersCheckbox=document.querySelectorAllcheckbox-offers； const recreactetext=document.querySelector.recreactate-text； const checkboxTotal=document.querySelectorAllcheckbox-total； 设total=0； 对于let i=0；i{ 如果OfferCheckBox[i]。选中===true{ RecreacteText.innerHTML=重新计算发票总额； }否则{ 重新计算文本.innerHTML=； } }; } $2,434.38 $76.69

---

根据修复您已有的代码：

id是唯一的，所以使用checkbox提供作为类，使用querySelectorAll作为循环 Js数字中没有，所以需要清除它们以获得能够使用数学函数的数字 在您的循环中，有e witch指示事件，所以使用e.target以该事件为目标并归档并获取其值。 使用OfferCheckBox[i]您只需添加EventListener，然后使用e.target 您需要使用parseFloatnum将值转换为数字 在插入值时，您需要考虑已经添加的值（如果有），如果不是，则解析为0，如果有，则解析为数字，并向其添加附加值： 如果你想加回去，作为结果的第千个分隔符，这里有很多答案，所以，只需搜索它们。 RecreacteText.innerHTML=ParseFloatRecreacteText.innerHTML|| 0+num2

const offersCheckbox=document.queryselectoral.checkbox-offers； const recreactetext=document.querySelector.recreactate-text； 设total=0； 对于let i=0；i{ 让num=e.target.value.split.join 设num2=parseFloatnum 如果e.target.checked==true{ RecreacteText.innerHTML=ParseFloatRecreacteText.innerHTML | | | 0+num2 }否则{ 重新计算文本.innerHTML=； } }; } $2,434.38 $76.69

---

请注意，您需要利用输入字段的事件处理程序系统，在本例中是onchange，其中每个输入字段处理修改每个价格总和的存储值

我确实通过regex向数字规范化程序写入了一个货币，但是我没有向货币格式化程序写入一个数字，以便将总额重新格式化回一种货币。你需要自己处理这件事

设和=0； 让addPrice=elem=>{ 让value=parseflotelem.value.replace/\$\124;，/g，2； 元素检查？总和+=值：总和-=值； document.getElementById'result'.innerHTML=sum； }; $2,434.38 $76.69

---

总计：0我没有对您的原始代码做太多更改。查看评论以了解我所做的更改，如果您有其他问题，请随时发表评论

const recreactetext=document.querySelector.recreactate-text； const checkboxContainer=document.querySelectorcheckbox-container； 设total=0； //创建一个数字格式化程序以在UI上打印-这是一种比regex IMO更好的方法。 const formatter=new Intl.NumberFormat'en-US'{ 风格：“货币”， 货币：美元 }; //请注意这里使用的事件委托-这意味着我只向单个DOM元素添加了一个事件处理程序 //阅读本博客，了解更多关于活动授权的信息以及为什么它有用：https://davidwalsh.name/event-delegate checkboxContainer.addEventListener'change'，e=>{ //还请注意，我正在侦听更改事件，而不是单击事件。 //请看这里：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event 如果e.target.tagName==输入{ const floatValue=parsefloat.target.value； 如果e.target.checked{ 总+=浮动值； }否则{ 总计-=浮动值； } } 重新计算文本.innerHTML=formatter.formattotal； }; $2,434.38 $76.69

---

你试了什么？所以，不是免费的代码编写或评估服务，请分享您的附件

---

我们会解决的。另外，按下编辑器中的按钮并创建一个代码段，这将大大增加您获得答案的机会。还需要指出的是，关于如何做到这一点，您所需要知道的已经在这里或谷歌上得到了回答。所以，试着问一个问题并解决这个问题。欢迎来到这里，HTML元素id必须是唯一的，您需要更改每个输入字段的id属性我更改了类的id，但这并不能解决我的问题，有什么办法吗？这是因为您的jquery选择器不正确，有一些答案你已经可以考虑去寻找这样的答案，这样可以解决他们不欢迎的问题，所以他们需要解释，所以事实上，他们从下一次学到了一些东西。为什么对于上帝的爱，你会在最后一个插入片段中添加jQuery吗？jquery在任何地方都没有被提及@我认为jQuery行可以很容易地更改为document.getElementById，当然它可以进行一致性更新，而且应该是：我认为这很有趣。在vanilla js中，插入jquery是没有意义的。我明白你的意思了，很好的一点Hanks，顺便说一句，我喜欢你使用regex的方法，但是你永远不会发现我这样做是为了像这样简单的事情。加入是我的路。不过，这是一个很好的例子。还有一个是全部。为了使它更加冗余，我没有对原始代码做太多更改。好吧，如果没有任何其他重复相同的ID，您应该解决。。。有document.querySelectorAllcheckbox-offers；在id上，这是重复的。。。更准确地说，还有查询选择器。因此，它slef的代码是错误的，需要寻址。这对我来说是可行的，而不是使用我使用的split、.join格式化程序，并在输入上而不是在div容器上执行事件侦听器。谢谢大家

$('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);
   }
});