问如何使用Javascript对表单中不同字段类型的值进行求和

EN

function getValues() {
  let myForm = document.getElementById('myForm');
  let formData = new FormData(myForm);
  
  let total = 0;

  for (var value of formData.values()) {
     total += parseInt(value);
  }
  
  document.getElementById("total").innerHTML = total;
  
  console.log(total);
}

<form id="myForm" name="myForm">
  <div>
    <label for="age">What is your age?</label>
    <select name="age">
        <option value="">- Select -</option>
        <option value="1" class="">30-34</option>
        <option value="2">35-39</option>
    </select>
  </div>
  <div>
    <label for="riskSmoke">Do you smoke?</label>
    <label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label>
    <label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
  </div>
</form>

<button onclick="getValues()">Get Values</button>

<p>Total:</p>
<div id="total"></div>

An HTML <form> element — when specified, the FormData object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.

formData.append('username', 'Chris'); 

const sumValues = () => {
  let val = 0;
  $("#myForm :input").each(function() {
    if (this.type === "radio" || this.type === "checkbox")
      val += this.checked ? +this.value : 0;
    else val += +this.value; // cast to number
  })
  $("#total").text(val)
};
$(function() {
  $("#myForm").on("change", sumValues).change(); //when page loads
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm">
  <select name="age">
    <option value="">- Select -</option>
    <option value="1" class="" selected>30-34</option>
    <option value="2">35-39</option>
  </select>


  <p>Do you smoke?</p>
  <label for="riskSmoke"><input type="radio" checked name="riskSmoke" value="2"> Yes</label><br>
  <label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
  <br/>Total: <span id="total" />
</form>

const sumValues = () => {
  let val = 0;
  [...document.getElementById("myForm").querySelectorAll("input, select, textarea")].forEach(function(elem) {
    if (elem.type === "radio" || elem.type === "checkbox")
      val += elem.checked ? +elem.value : 0;
    else val += +elem.value; // cast to number
  })
  document.getElementById("total").textContent = val;
};
window.addEventListener("load", function() {
  document.querySelector("#myForm").addEventListener("change", sumValues)
  sumValues()
})

<form id="myForm">
  <select name="age">
    <option value="">- Select -</option>
    <option value="1" class="" selected>30-34</option>
    <option value="2">35-39</option>
  </select>


  <p>Do you smoke?</p>
  <label for="riskSmoke"><input type="radio" checked name="riskSmoke" value="2"> Yes</label><br>
  <label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
  <br/>Total: <span id="total" />
</form>