计算多项选择形式的总分，并为每个选择的选项设置值答案

【问题标题】：Calculate overall score for multiple choice form with set value for each option selected计算多项选择形式的总分，并为每个选择的选项设置值
【发布时间】：2019-05-14 12:17:58
【问题描述】：

我需要获得一组多项选择题的总分。每个选项都分配有一个数值。

如果总数超过 50，用户将收到一封电子邮件，通知他们他们的申请已提交。

到目前为止，我一直无法得出总分。

我尝试了许多不同的解决方案，我在这里找到并尝试应用它们，但都没有奏效。我对 JavaScript 相当陌生，这没有帮助！

$(":radio").on("change", function() {
  var total = 0;
  $(":radio:checked").each(function() {
    total += Number(this.value);
  });

  $("#total").text(total);
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <form action="">

    <li>
      <div>
        <h3>What age band do you fit into?</h3>
        <input class="calc" type="radio" name="radio1" value="25" checked="true">25 - 31<br>
        <input class="calc" type="radio" name="radio1" value="25" checked="true">32 - 38<br>
        <input class="calc" type="radio" name="radio1" value="25" checked="true">39 - 43<br>
      </div>
    </li>

    <p>Total Score:<span id="total">0</span></p>

  </form>
</body>

</html>

【问题讨论】：

请更准确一点：在什么情况下，这应该是什么东东，它在做什么？
我基本上必须创建一个包含 11 个问题的表单，所有选择题的答案。每个选择都会有一个分数。用户的申请需要超过 50 分才能被接受。一旦他们得分超过 50，他们应该会收到一封邀请他们面试的电子邮件。 javascript 需要将分数值相加。目前它什么也没做。我有一个非交互式 html 表单！ ??????

标签： javascript html

【解决方案1】：

您已将脚本放在<head> 标记中。将它移动到身体下方将正确加载它：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <form action="">
      <li>
        <div>
          <h3>What age band do you fit into?</h3>
          <input
            class="calc"
            type="radio"
            name="radio1"
            value="25"
            checked="true"
          />25 - 31<br />
          <input
            class="calc"
            type="radio"
            name="radio1"
            value="25"
            checked="true"
          />32 - 38<br />
          <input
            class="calc"
            type="radio"
            name="radio1"
            value="25"
            checked="true"
          />39 - 43<br />
        </div>
      </li>

      <p>Total Score:<span id="total">0</span></p>
    </form>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script language="javascript">
      $(":radio").on("change", function() {
        var total = 0;
        $(":radio:checked").each(function() {
          total += Number(this.value);
        });

        $("#total").text(total);
      });
   </script>
   
</html>

【讨论】：

没问题，只是代码的位置而已?

【解决方案2】：

我相信你在这里试图完成的一个简单的例子。只需存储您添加的值，然后在添加新值之前从总数中减去它。

  (function () {
            var group = document.forms.myForm.elements.add;
            var currentValue = function currentValue () {
                for (var i = 0, j = group.length; i < j; i++) {
                    if (group[i].checked) {
                        return Number(group[i].value);
                    }
                }
            };
            var oldValue = currentValue();
            var total = document.getElementById('total').firstChild;

            var update = function update () {
                var current = currentValue();
                total.data = Number(total.data) - oldValue + current;
                oldValue = current;
            };

            for (var i = 0, j = group.length; i < j; i++) {
                group[i].onchange = update;
            }
        }());

    <form action="" method="get" id="myForm">
        <fieldset id="myRadioGroup">
            <legend>Which Age Band do You Fit Into?</legend>
            <div>
                <label> <input type="radio" value="0" name="add" checked> 25 - 31 </label>
            </div>
            <div>
                <label> <input type="radio" value="20" name="add"> 32 - 38 </label>
            </div>
            <div>
                <label> <input type="radio" value="30" name="add"> 39 - 43 </label>
            </div>

        </fieldset>
    </form>

        <div id="total">0</div>

【讨论】：

您好，非常感谢您的帮助！这真的很好用。如果你不介意，我有后续吗？当我添加第二个问题并选择一个答案时，代码会显示该选择的分数。我需要将第一个和第二个问题的选择加在一起。我尝试更改“total.data = Number(total.data) - oldValue + current;”行到“total.data = Number(total.data) + oldValue + current;”。这是加总分，但如果我返回并更改选择，它也会加分吗？

【解决方案3】：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <form action="">
      <li>
        <div>
          <h3>What age band do you fit into?</h3>
          <input
            class="calc"
            type="radio"
            name="radio1"
            value="25"
            checked="true"
          />25 - 31<br />
          <input
            class="calc"
            type="radio"
            name="radio1"
            value="25"
            checked="true"
          />32 - 38<br />
          <input
            class="calc"
            type="radio"
            name="radio1"
            value="25"
            checked="true"
          />39 - 43<br />
        </div>
      </li>

      <p>Total Score:<span id="total">0</span></p>
    </form>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script language="javascript">
      $(":radio").on("change", function() {
        var total = 0;
        $(":radio:checked").each(function() {
          total += Number(this.value);
        });

        $("#total").text(total);
      });
   </script>
   
</html>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。