计算Javascript中HTML单选按钮的值

Question

我有一个表单/调查表，用户必须在其中选择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')
}

Answer 1

age = checked

无法工作，因为age是一个整数，并且不使用单个等号进行比较。还检查的是财产，而不是可比的。您可以像这样使用它：

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

假设您想知道为什么不返回任何内容，您也没有提出问题。

Answer 2

我假设您想对所有选中的单选按钮值进行求和，例如，点击 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>