我想在 javascript 中选中复选框时对数字求和

问题描述

我想对数字求和并在 span 中打印出来，我尝试使用 innerHTML 但因为它是一个我不能的字符串，我尝试了 parseInt、parseFloat、Number 和什么都没有。对于所有选中的复选框，我希望将其值的总和放入跨度中，而那些未选中的复选框我不希望它们在跨度中获得总和

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

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>

解决方法

根据修复您已有的代码：

id 是唯一的，所以使用 checkbox-offers 作为 class 和 querySelectorAll 因为你已经有了它的循环
Js 数字中没有 ,，因此您需要清除它们以获得具有数学功能的数字
在您的循环中，您有 (e) 女巫指示事件，因此使用 e.target 定位该 event 并提交并获取其 value。
使用offersCheckbox[i]，您只需addEventListener，然后您使用e.target
您需要使用 parseFloat(num) 将值转换为数字
插入值时需要考虑已经添加的值，如果有，则解析为0，如果有则解析为数字并添加：
如果您想添加回来，作为结果的千分位分隔符，SO 上有很多答案，只需搜索它们即可。

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>

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

checkbox checkbox checked javascript sum sum

我想在 javascript 中选中复选框时对数字求和

问题描述

解决方法

相关问答