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

我似乎不知道如何将不同字段类型的值求和到一个表单中。我有一些选择字段，如下所示：

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

const radioControls = document.querySelectorAll('.radio-btn');
const selectControl = document.querySelectorAll('.select');
let dataTransferObject = {
  radioValue: 0,
  selectValue: 0
};
let sum = 0;

function collectValues() {
  for(let control of radioControls) {
    if (control.checked) {
      dto.radioValue = control.value
    }    
  }
  dto.selectValue = selectControl[0].value;
  for(let attr of Object.values(dto)) {
    sum += parseInt(attr);
  }  
}

和一些单选按钮：

    <p>Do you smoke?</p>
    <label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br>
    <label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>

但是我怎么把所有的选择加起来呢？我可以找到添加输入值、收音机值或选择值的解决方案。但不是全部

如果有必要，我会使用jQuery

---

[编辑]我应该说，我想将总值输出给用户，可能是在元素内部。

您可以使用构造函数FormData

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.

---

我将所有输入包装成一个带有ID和总和的表单，确保只对选中的收音机和复选框进行计数

const sumValues==>{ 设val=0； $myForm:input.eachfunction{ 如果this.type==收音机| | this.type==复选框 val+=this.checked？+this.value:0； else val+=+this.value；//转换为数字 } $total.textval }; $function{ $myForm.onchange，sumValues.change；//页面加载时 } -挑选- 30-34 35-39 你抽烟吗

对 不 总数：

---

我假设您的意思是添加所选元素的值，并且您使用了一些触发器。在本例中，我使用了一个按钮。要使其工作，请选择具有值的选项

请尝试此选项

const button=document.querySelectorbutton； button.AddEventListener单击，=>{ const age=document.querySelectorselect； const risksmooke=document.querySelector'input[name=risksmooke]：选中'； 如果年龄&&age.value&&risk冒烟{ const ageValue=+age.value； 常量riskSmokeValue=+riskSmoke.value； console.logageValue+风险值； } }; -挑选- 30-34 35-39 你抽烟吗

对 不

---

单击不带jQuery的，选择特定值：

函数getValues{ var ageValue=Numberdocument.queryselector选择[name=age].value； console.log'age value:'+ageValue； var smokeValue=Numberdocument.querySelector'input[name=riskSmoke]：选中'。值； console.log'smoke value:'+smoke value； console.log'age+smoke:'+ageValue+smoke值； } -挑选- 30-34 35-39 你抽烟吗

对 不

---

获取值在HTML底部放置一个按钮，并创建如下函数：

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

const radioControls = document.querySelectorAll('.radio-btn');
const selectControl = document.querySelectorAll('.select');
let dataTransferObject = {
  radioValue: 0,
  selectValue: 0
};
let sum = 0;

function collectValues() {
  for(let control of radioControls) {
    if (control.checked) {
      dto.radioValue = control.value
    }    
  }
  dto.selectValue = selectControl[0].value;
  for(let attr of Object.values(dto)) {
    sum += parseInt(attr);
  }  
}

然后你的按钮简单地调用这个函数，我想这一切都会包含在某种形式中：

<button onclick="collectValues()">Submit</button>

---

现在，变量sum保存累积值。

jQuery似乎有点过分了。为了获得选项和输入的总和，您可以首先在选择标签中获取选项的值，然后将其添加到所选无线电输入的值中，如下所示：

你的头衔在这里 -挑选- 30-34 35-39 你抽烟吗

对 不 计算 让AgrangePicker=null，riskSmokeOptions=null； 函数计算值{ AgrangePicker=document.getElementByIdsomeId； ifageRangePicker.value！=={ 设sum=NumberageRangePicker.value； riskSmokeOptions=document.getElementsByNamesSmoke fori=0；i可以稍微清理一下，但使用FormData接口将表单中的所有值相加的示例如下：

函数getValues{ 让myForm=document.getElementById'myForm'； 设formData=newformdatamyform； 设total=0； formData.values的var值{ 总+=总值； } document.getElementByIdtotal.innerHTML=total； console.logtotal； } 你几岁？ -挑选- 30-34 35-39 你抽烟吗？ 对 不 获取价值 总数：

---

使用jQuery，您可以侦听更改事件并同时使用jQuery.serializeArray和array.reduce方法来获取总数：

$('form').on('change', function() {
    let totalScore = $(this).serializeArray().reduce((a, f) => a += +f.value, 0);
    //output to a predefined element
    $('#output').text( totalScore );
})
.change();

以下是如何定义输出元素：

<div class="output">
    <label>Total Score: </label>
    <span id="output"></span>
</div>

-挑选- 30-34 35-39 你抽烟吗

对 不 总分：

---

请根据您展示的示例分享预期结果。我想它将添加所选元素的值。是吗？是的，对不起。它应该汇总所有选定选项的值。如果用户选择选项30-40，然后选择“否”单选按钮，则表单应显示总和11+0。好的，请尝试我建议的示例，不是很普通，是吗？@mplungjan一点也不，但我假设OP希望添加特定值，而不仅仅是页面上的所有内容。如果页面上有多个输入需要单独相加，那么这里的其他答案会导致问题，因此只想给出一个如何选择内容的示例

---

如果你愿意的话，我希望OP会将表单中的所有值相加/container@mplungjan是的，但在这种情况下，我可能会建议使用表单。但正如您在我的回答中所看到的，我们可以对页面上的所有输入字段求和，或者在我的最新版本中，在不知道其名称的情况下使用表单。不是很通用吗？对不起，您的意思是什么？使用您的代码，OP必须将每个字段分别添加到其总和中。看看我的答案，看看我的意思。重要的是，如果用户更改了一个值，那么总数也会相应地更改。我添加了一个简单的JS版本看起来不是很通用，是吗？我会说，在现实世界的应用程序中，代码杀伤力过大，我完全同意，但我对答案的想法是展示这样做的“老式方式”，因为这看起来更像是一个初学者的问题。