求和无线电输入值[重复]答案

【问题标题】：Sum radio inputs values [duplicate]求和无线电输入值[重复]
【发布时间】：2021-08-15 02:31:45
【问题描述】：

我有这样的无线电输入：

<input type="radio" name="battery" class="radio" value="0" id="63" />
<label for="63">SoH 63-65%</label>
<input type="radio" name="battery" class="radio" value="100" id="66" />
<label for="66">SoH 66-67%</label>
<input type="radio" name="battery" class="radio" value="200" id="68" />
<label for="68">SoH 68-69%</label>

还有这个：

    <input type="radio" name="year" class="radio" value="400" id="2015" />
    <label for="2015">2015 year</label>
    <input type="radio" name="year" class="radio" value="500" id="2016" />
    <label for="2016">2016 year</label>

点击此按钮，它们的值会汇总所有值

<button class="load-more-btn" id="sumUp>
  Sum up
</button>

结果应该用这个脚本输出：

document.getElementById("price").innerHTML = RESULTVALUE;

我该怎么做？

【问题讨论】：

欢迎来到 Stack Overflow！ StackOverflow 不是免费的编码服务。你应该try to solve the problem first。请更新您的问题以在minimal reproducible example 中显示您已经尝试过的内容。如需更多信息，请参阅How to Ask，并拨打tour :)
这里有一些起点：document.querySelectorAll("input[type=radio]:checked") 获取所有选定的按钮。循环它们。使用.value 和parseInt() 获取每个值。将值添加到累加器变量。
Duplicate of How to sum radio button values using either Javascript or jQuery?。

标签： javascript html jquery sum

【解决方案1】：

您可以使用querySelector 和:checked pseudo-class 来获取选中的单选按钮，然后将它们的值相加：

sumUp.addEventListener('click', function(){
  var sum = +document.querySelector('[name="battery"]:checked').value + +document.querySelector('[name="year"]:checked').value;
  document.getElementById("price").innerHTML = sum;
})

<input type="radio" name="battery" class="radio" value="0" id="63" />
<label for="63">SoH 63-65%</label>
<input type="radio" name="battery" class="radio" value="100" id="66" />
<label for="66">SoH 66-67%</label>
<input type="radio" name="battery" class="radio" value="200" id="68" />
<label for="68">SoH 68-69%</label>

<input type="radio" name="year" class="radio" value="400" id="2015" />
<label for="2015">2015 year</label>
<input type="radio" name="year" class="radio" value="500" id="2016" />
<label for="2016">2016 year</label>
<button class="load-more-btn" id="sumUp">
  Sum up
</button>
<div id="price"></div>

【讨论】：