时间戳

首页 > 解决方案 > 计算 JavaScript 中 HTML 单选按钮的值

javascript - 计算 JavaScript 中 HTML 单选按钮的值

问题描述

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

标签： javascripthtmlradiochecked

解决方案

我假设您想在单击例如 a时对所有选定的单选按钮值进行求和。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>

推荐阅读