计算 JavaScript 中 HTML 单选按钮的值答案

【问题标题】：Counting values from HTML radio buttons in Javascript计算 JavaScript 中 HTML 单选按钮的值
【发布时间】：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 选择器完成查找选中元素的工作（请参阅我的答案）。这样您就不必检查每个单选按钮是否被选中。

标签： javascript html radio checked

【解决方案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')
}

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

【讨论】：

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