如何做一个减法后做一个实时输入的总和？

Question

我必须用我在一个表单中的一些输入做一个和，表单中有一系列输入类型的复选框和单选框，当选择这些复选框和单选框时，它们会被加在一起。

但是如果用户取消选中一个复选框，它就不会减去，或者如果他改变单选按钮，他就不会减去只有加法和加法。

我有这样的代码。

    function myFunction() {
    items = document.getElementsByClassName("itemTotalNeto")
    for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('change', function() {
            n = document.getElementById("totalGeneral");
            n.value = parseInt("0"+n.value) + parseInt("0"+this.value);
            this.defaultValue = this.value;
        });
    };

}

当我取消勾选复选框和改变单选按钮时 我怎么能让它做减法？

我根本不是JavaScript专家，我刚开始

Answer 1

值得一提的是，这里有一个例子（见代码段），每次改变任何输入时，它都会遍历所有的输入，并将所有选中的值相加。然后替换总和。如果没有勾选，则不需要做减法。

const inputArray = document.querySelectorAll('input');
const totalValue = document.querySelector('#totalGeneral');

inputArray.forEach((elem) => elem.addEventListener('change', sumValues));

function sumValues() {
  let cboxVals = 0;
  inputArray.forEach(element => cboxVals += element.checked ? parseInt(element.value, 10) : 0);
  totalValue.innerHTML = cboxVals;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

main {
  margin: 0 5vw;
  position: absolute;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, min-content);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

h3 {
  grid-row: 1/2;
  grid-column: 1/3;
}

.wrapper {
  position: relative;
  grid-row: 2/3;
  grid-column: auto;
  width: 100%
}

<main>
  <h3>Sum of selected values: <span id="totalGeneral">0</span></h3>
  <div class="wrapper">
    <p>Select a radio value:</p>
    <input type="radio" id="radio_00" class="itemTotalNeto" name="radioValues" value="0" checked>
    <label for="radio_01">0</label>
    <input type="radio" id="radio_01" class="itemTotalNeto" name="radioValues" value="1">
    <label for="radio_01">1</label>
    <input type="radio" id="radio_02" class="itemTotalNeto" name="radioValues" value="2">
    <label for="radio_02">2</label>
    <input type="radio" id="radio_03" class="itemTotalNeto" name="radioValues" value="3">
    <label for="radio_03">3</label>
  </div>
  <div class="wrapper">
    <p>Select checkbox value(s):</p>
    <input id="chkbox_01" type="checkbox" class="itemTotalNeto" value="1">
    <label for="chkbox_01">1</label>
    <input id="chkbox_02" type="checkbox" class="itemTotalNeto" value="2">
    <label for="chkbox_02">2</label>
    <input id="chkbox_03" type="checkbox" class="itemTotalNeto" value="3">
    <label for="chkbox_03">3</label>
    <input id="chkbox_04" type="checkbox" class="itemTotalNeto" value="4">
    <label for="chkbox_04">4</label>
  </div>
</main>

Answer 2

你必须在更改事件后检查复选框或单选输入是否被选中。

function myFunction() {
    items = document.getElementsByClassName("itemTotalNeto")
    for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('change', function() {
            n = document.getElementById("totalGeneral");
            //checking here if the checkbox /radio  is checked or not 
            if(this.checked){
                //if checked, add
                n.value = parseInt("0"+n.value) + parseInt("0"+this.value);
            }else{
                //otherwise subtract
                n.value = parseInt("0"+n.value) - parseInt("0"+this.value);
            }


            this.defaultValue = this.value;
        });
    };

}