计算 JavaScript 中 HTML 单选按钮的值

Posted 2023-03-27

【中文标题】计算 JavaScript 中 HTML 单选按钮的值

【英文标题】：Counting values from HTML radio buttons in Javascript

【发布时间】：2019-06-07 16:51:48

【问题描述】：

我有一个表单/问卷，用户必须在其中选择 html 中的各种选项。 然后 javascript 将添加所有选项；有更多的表格将被加起来以创建一个总计。 我知道我需要使用 parseInt 和各种 if 语句： 如果选择选项 1，则返回值 如果选择了选项 2，则返回值 等等..

HTML：

<input type="radio" name="age" id= "age1" value="0" checked> 1-25<br>
<input type="radio" name="age" id= "age2" value="5"> 26-40<br>
<input type="radio" name="age" id= "age3" value="8"> 41-60<br>
<input type="radio" name="age" id= "age4" value="10"> 60+<br>

Javascript：

calculateAge () 
    var age = parseInt (document.getElementById('age1').value)
    if (age = checked)  return age;
    console.log('age')

【问题讨论】：

你的问题是什么？你的代码有什么用？

您可以简单地让适当的 CSS 选择器完成查找选中元素的工作（请参阅我的答案）。这样您就不必检查每个单选按钮是否被选中。

【参考方案1】：

我假设您想在 click 上对所有选定的单选按钮 values 进行 sum，例如button。

这个方法的核心是只选择那些被选中的单选按钮 input[type=radio]:checked。如果你有这些，很容易使用Array.prototype.reduce 将集合归结为总和。

calc.addEventListener('click', sumToVariable)

var sum;

function sumUp() 
  let sum = [...document.querySelectorAll('input[type=radio]:checked')]
    .reduce(
      (acc, val) => acc + Number(val.value)
      , 0
    )
  result.textContent = sum;
  return sum;


function sumToVariable() 
  sum = sumUp();
  console.log(sum);

body 
  font-size: 10px;


#result:not(:empty)::before 
  content: "Sum of selected options: ";

<input type="radio" name="age" id="age1" value="0" checked> 1-25<br>
<input type="radio" name="age" id="age2" value="5"> 26-40<br>
<input type="radio" name="age" id="age3" value="8"> 41-60<br>
<input type="radio" name="age" id="age4" value="10"> 60+<br>
<hr />
<input type="radio" name="age2" id="age10" value="0" checked> 1-25<br>
<input type="radio" name="age2" id="age20" value="5"> 26-40<br>
<input type="radio" name="age2" id="age30" value="8"> 41-60<br>
<input type="radio" name="age2" id="age40" value="10"> 60+<br>
<hr />
<button type="button" id="calc">Calc</button>
<div id="result"></div>

您也可以在更改单选按钮时执行相同的操作：

radiobuttons.addEventListener('change', () => 
  result.textContent = [...document.querySelectorAll('input[type=radio]:checked')]
    .reduce(
      (acc, val) => acc + Number(val.value)
      , 0
    )
  
)

body 
  font-size: 10px;


#result:not(:empty)::before 
  content: "Sum of selected options: ";

<div id="radiobuttons">
  <input type="radio" name="age" id="age1" value="0" checked> 1-25<br>
  <input type="radio" name="age" id="age2" value="5"> 26-40<br>
  <input type="radio" name="age" id="age3" value="8"> 41-60<br>
  <input type="radio" name="age" id="age4" value="10"> 60+<br>
  <hr />
  <input type="radio" name="age2" id="age10" value="0" checked> 1-25<br>
  <input type="radio" name="age2" id="age20" value="5"> 26-40<br>
  <input type="radio" name="age2" id="age30" value="8"> 41-60<br>
  <input type="radio" name="age2" id="age40" value="10"> 60+<br>
</div>
<hr />
<div id="result"></div>

【讨论】：

这第一个选项很棒并且有效，但我需要根据结果输出某些消息。就目前而言，我不知道如何使用该结果来做到这一点。可以变成变量吗？

当然，只返回reduce函数的结果。我将编辑第一个变体。

【参考方案2】：

age = checked

不能工作，因为 age 是一个 int，并且不使用单个等号进行比较。还检查了一个属性，而不是一个可比的。你可以这样使用它：

function calculateAge () 
  let age = parseInt (document.getElementById('age1').value)
  if (document.getElementById('age1').checked)  return age;
  console.log('age')

另外你没有问问题，假设你想知道为什么没有返回。

【讨论】：

抱歉没有提问。谢谢，我相信这就是我想要的。