打印给用户的单选按钮值的总和答案

【问题标题】：Sum of Radio button values printed to the user打印给用户的单选按钮值的总和
【发布时间】：2020-08-19 15:36:12
【问题描述】：

我对 html 很陌生。

我有一个包含两个问题的调查，其中的问题选择通过单选按钮显示，如下 html 代码所示：

<form>
    <p id="description">1. Question 1?</p>
    <p>
        <label><input type="radio" name="q1" value="5" /> Yes</label>
        <label><input type="radio" name="q1" value="0" /> No</label>
    </p>
    <p id="description">2. Question 2?</p>
    <p>
        <label><input type="radio" name="q2" value="5" /> Yes</label>
        <label><input type="radio" name="q2" value="0" /> No</label>
    </p>
</form>

我想向用户打印他的两个选择的总和。

所以输出可能是“你的得分是 10”。如果他对这两个问题的回答都是肯定的等等。

如果代码与上面的 html 代码位于同一页面上，我怎样才能以最简单的方式做到这一点？这可能吗？

【问题讨论】：

使用javascript实现。此外，id 的元素在同一页面上应该是唯一的。

标签： javascript html radio-button

【解决方案1】：

var question1Answers = document.getElementsByName('q1');
var question2Answers = document.getElementsByName('q2');
var answer = 0;

question1Answers.forEach((e) => {
    if (e.checked) {
        answer += e.value;
        break;
    }
});

question2Answers.forEach((e) => {
    if (e.checked) {
        answer += e.value;
        break;
    }
});

console.log(answer);

【讨论】：

此代码使var question2Answers = document.getElementsByName('q2'); 对许多问题变量 make ？你能编辑这个硬编码的答案吗..顺便说一句谢谢:)
更新很多问题的答案都是用户。
我在控制台上收到一条消息“SyntaxError: 'break' 仅在 switch 或循环语句中有效。”
我认为@dan-mullin 的解决方案是最优雅的。我不得不做出一些改变。一个是foreach不支持break。所以我删除了休息。我的目的不需要它，最终它会使代码效率降低而没有中断，但在功能上是相同的。第二个是将 e.value 更改为 parseInt(e.value) 否则我会得到数字的字符串连接。否则，一切正常。谢谢。

【解决方案2】：

请试试这个：

$("input[type='button']").click(function () {
  var score = getChecklistItems();
  alert("You score is : " + score);
});

function getChecklistItems() {
  var total_score = 0
  var result = $("input:radio:checked").get();
  var checked_value = $.map(result, function (element) {
    return $(element).attr("value");
  });
  for (i = 0; i < checked_value.length; i++) {
    total_score += parseInt(checked_value[i])
  }
  return total_score
}

<form>
  <p id="description">1. Question 1?</p>
  <p>
    <label><input type="radio" name="q1" value="5" /> Yes</label>
    <label><input type="radio" name="q1" value="0" /> No</label>
  </p>
  <p id="description">2. Question 2?</p>
  <p>
    <label><input type="radio" name="q2" value="5" /> Yes</label>
    <label><input type="radio" name="q2" value="0" /> No</label>
  </p>
  <p><input type="button" value="Submit"></p>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：