Question

我是javaScript的新手，对于如何从已检查的单选框中获取总数感到困惑。此外，我正在尝试为用户添加提交按钮，以便只有在他们单击提交后才会显示总计。我觉得好像我可能没有正确解析这些值？

感谢帮助谢谢！

＆＃13;

<html>
<head>
  <script>
  function calculateTotal() {
    var score = 0;

   q1 = new Array(1,2,3,4,5);
   q2 = new Array(1,2,3,4,5);
   q3 = new Array(1,2,3,4,5);
   q4 = new Array(1,2,3,4,5);
   q5 = new Array(1,2,3,4,5);

   for (var i = 0; i < q1.length; i++ ) {
     if(q1[i].checked){
       score += parseFloat(q1[i].value);
     }

  for(var c = 0; c < q2.length; c++){
    if(q2[i].checked){
      score += parseFloat(q2[i].value);
    }

    for(var c = 0; c < q3.length; c++){
      if(q3[i].checked){
        score += parseFloat(q3[i].value);
      }

      for(var c = 0; c < q4.length; c++){
        if(q4[i].checked){
          score += parseFloat(q4[i].value);
        }

      for(var c = 0; c < q5.length; c++){
          if(q5[i].checked){
            score += parseFloat(q5[i].value);
          }

        }
      }
    }
  }
 }
}

  </script>
</head>

<p class="question">1. Rate your family life?</p>

<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">1</label>
  <br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">2</label>
  <br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">3</label>
  <br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">4</label>
  <br/>
<input type="radio" name="q1" value="e" id="q1e"><label for="q1e">5</label>
  <br/>
</ul>


<p class="question">2. Rate your romantic life?</p>

<ul class="answers">
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">1</label>
  <br/>
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">2</label>
    <br/>
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">3</label>
    <br/>
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">4</label>
    <br/>
<input type="radio" name="q2" value="e" id="q2e"><label for="q2e">5</label>
      <br/>
</ul>

<p class="question">3. Rate your social life?</p>

<ul class="answers">
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a">1</label>
   <br/>
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b">2</label>
  <br/>
 <input type="radio" name="q3" value="c" id="q3c"><label for="q3c">3</label>
  <br/>
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d">4</label>
  <br/>
<input type="radio" name="q3" value="e" id="q3e"><label for="q3e">5</label>
   <br/>
</ul>

<p class="question">4. Rate your career/academic life?</p>

<ul class="answers">
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a">1</label>
    <br/>
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b">2</label>
    <br/>
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c">3</label>
   <br/>
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d">4</label>
   <br/>
<input type="radio" name="q4" value="e" id="q4e"><label for="q4e">5</label>
  <br/>
</ul>

<p class="question">5. Rate how you physically feel (e.g. lethargic 1 to 
energetic 5)?</p>

<ul class="answers">
<input type="radio" name="q5" value="a" id="q5a"><label for="q5a">1</label>
    <br/>
<input type="radio" name="q5" value="b" id="q5b"><label for="q5b">2</label>
   <br/>
<input type="radio" name="q5" value="c" id="q5c"><label for="q5c">3</label>
   <br/>
<input type="radio" name="q5" value="d" id="q5d"><label for="q5d">4</label>
   <br/>
<input type="radio" name="q5" value="d" id="q5e"><label for="q5e">5</label>
  <br/>
</ul>

 <script>
alert("Your overall score is " + calculateTotal());
</script>

＆＃13;

Answer 1

您要做的是将复选框作为数组，而不是自己创建一些不相关的数组。这可以使用document.getElementsByName("q1");

来完成

function calculateTotal() {
        var score = 0;

       q1 = document.getElementsByName("q1");
       q2 = document.getElementsByName("q2");
       q3 = document.getElementsByName("q3");
       q4 = document.getElementsByName("q4");
       q5 = document.getElementsByName("q5");

       for (var i = 0; i < q1.length; i++ ) {
         if(q1[i].checked){
           score += parseFloat(q1[i].value);
         }

      for(var c = 0; c < q2.length; c++){
        if(q2[i].checked){
          score += parseFloat(q2[i].value);
        }

        for(var c = 0; c < q3.length; c++){
          if(q3[i].checked){
            score += parseFloat(q3[i].value);
          }

          for(var c = 0; c < q4.length; c++){
            if(q4[i].checked){
              score += parseFloat(q4[i].value);
            }

          for(var c = 0; c < q5.length; c++){
              if(q5[i].checked){
                score += parseFloat(q5[i].value);
              }

            }
          }
        }
      }
     }
    }

编辑：哦，并且对于按钮来计算用户检查的值，你可以做很简单的事情：

<div onClick="calculateTotal();"> Calculate total </div>

Answer 2

添加按钮，将事件处理程序附加到该按钮，然后计算总数

document.getElementById('total').addEventListener('click', calculateTotal);

function calculateTotal() {
  var els = document.querySelectorAll('input[type=radio][name^=q]:checked');
  var val = [].map.call(els, function(el) {
    return "abcde".split('').indexOf(el.value) + 1;
  });
  var tot = val.reduce(function(a, b) {
    return a + b
  });

  alert(tot);
}

<p class="question">1. Rate your family life?</p>

<ul class="answers">
  <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">1</label>
  <br/>
  <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">2</label>
  <br/>
  <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">3</label>
  <br/>
  <input type="radio" name="q1" value="d" id="q1d"><label for="q1d">4</label>
  <br/>
  <input type="radio" name="q1" value="e" id="q1e"><label for="q1e">5</label>
  <br/>
</ul>


<p class="question">2. Rate your romantic life?</p>

<ul class="answers">
  <input type="radio" name="q2" value="a" id="q2a"><label for="q2a">1</label>
  <br/>
  <input type="radio" name="q2" value="b" id="q2b"><label for="q2b">2</label>
  <br/>
  <input type="radio" name="q2" value="c" id="q2c"><label for="q2c">3</label>
  <br/>
  <input type="radio" name="q2" value="d" id="q2d"><label for="q2d">4</label>
  <br/>
  <input type="radio" name="q2" value="e" id="q2e"><label for="q2e">5</label>
  <br/>
</ul>

<p class="question">3. Rate your social life?</p>

<ul class="answers">
  <input type="radio" name="q3" value="a" id="q3a"><label for="q3a">1</label>
  <br/>
  <input type="radio" name="q3" value="b" id="q3b"><label for="q3b">2</label>
  <br/>
  <input type="radio" name="q3" value="c" id="q3c"><label for="q3c">3</label>
  <br/>
  <input type="radio" name="q3" value="d" id="q3d"><label for="q3d">4</label>
  <br/>
  <input type="radio" name="q3" value="e" id="q3e"><label for="q3e">5</label>
  <br/>
</ul>

<p class="question">4. Rate your career/academic life?</p>

<ul class="answers">
  <input type="radio" name="q4" value="a" id="q4a"><label for="q4a">1</label>
  <br/>
  <input type="radio" name="q4" value="b" id="q4b"><label for="q4b">2</label>
  <br/>
  <input type="radio" name="q4" value="c" id="q4c"><label for="q4c">3</label>
  <br/>
  <input type="radio" name="q4" value="d" id="q4d"><label for="q4d">4</label>
  <br/>
  <input type="radio" name="q4" value="e" id="q4e"><label for="q4e">5</label>
  <br/>
</ul>

<p class="question">5. Rate how you physically feel (e.g. lethargic 1 to energetic 5)?</p>

<ul class="answers">
  <input type="radio" name="q5" value="a" id="q5a"><label for="q5a">1</label>
  <br/>
  <input type="radio" name="q5" value="b" id="q5b"><label for="q5b">2</label>
  <br/>
  <input type="radio" name="q5" value="c" id="q5c"><label for="q5c">3</label>
  <br/>
  <input type="radio" name="q5" value="d" id="q5d"><label for="q5d">4</label>
  <br/>
  <input type="radio" name="q5" value="d" id="q5e"><label for="q5e">5</label>
  <br/>
</ul>

<button id="total">Total</button>

Answer 3

这是一个工作示例。您需要更改值=＆＃34;＆＃34;到你想要添加的值。 document.getElementsByNames（＆＃34;＆＃34;）。value将获得此值。你的for循环也是你不想做的嵌套。您可以添加带有onclick方法的按钮来调用所需的方法。由于所有值都具有相同的长度，因此您只需使用一个for循环即可。您可能还想为html正文添加标记。

function calculateTotal() {
        var score = 0;

        q1 = document.getElementsByName("q1");
        q2 = document.getElementsByName("q2");
        q3 = document.getElementsByName("q3");
        q4 = document.getElementsByName("q4");
        q5 = document.getElementsByName("q5");

        for (var i = 0; i < q1.length; i++) {
            if (q1[i].checked) {
                score += parseFloat(q1[i].value);
            }

            if (q2[i].checked) {
                score += parseFloat(q2[i].value);
            }


            if (q3[i].checked) {
                score += parseFloat(q3[i].value);
            }


            if (q4[i].checked) {
                score += parseFloat(q4[i].value);
            }


            if (q5[i].checked) {
                score += parseFloat(q5[i].value);
            }
        }
        return score;
    }

以下是其中一个单选按钮的外观。 1.评价你的家庭生活？

<ul class="answers">
    <input type="radio" name="q1" value="1" id="q1a"><label for="q1a">1</label>
    <br/>
    <input type="radio" name="q1" value="2" id="q1b"><label for="q1b">2</label>
    <br/>
    <input type="radio" name="q1" value="3" id="q1c"><label for="q1c">3</label>
    <br/>
    <input type="radio" name="q1" value="4" id="q1d"><label for="q1d">4</label>
    <br/>
    <input type="radio" name="q1" value="5" id="q1e"><label for="q1e">5</label>
    <br/>
</ul>


<p class="question">2. Rate your romantic life?</p>

<ul class="answers">
    <input type="radio" name="q2" value="1" id="q2a"><label for="q2a">1</label>
    <br/>
    <input type="radio" name="q2" value="2" id="q2b"><label for="q2b">2</label>
    <br/>
    <input type="radio" name="q2" value="3" id="q2c"><label for="q2c">3</label>
    <br/>
    <input type="radio" name="q2" value="4" id="q2d"><label for="q2d">4</label>
    <br/>
    <input type="radio" name="q2" value="5" id="q2e"><label for="q2e">5</label>
    <br/>
</ul>

<p class="question">3. Rate your social life?</p>

<ul class="answers">
    <input type="radio" name="q3" value="1" id="q3a"><label for="q3a">1</label>
    <br/>
    <input type="radio" name="q3" value="2" id="q3b"><label for="q3b">2</label>
    <br/>
    <input type="radio" name="q3" value="3" id="q3c"><label for="q3c">3</label>
    <br/>
    <input type="radio" name="q3" value="4" id="q3d"><label for="q3d">4</label>
    <br/>
    <input type="radio" name="q3" value="5" id="q3e"><label for="q3e">5</label>
    <br/>
</ul>

<p class="question">4. Rate your career/academic life?</p>

<ul class="answers">
    <input type="radio" name="q4" value="1" id="q4a"><label for="q4a">1</label>
    <br/>
    <input type="radio" name="q4" value="2" id="q4b"><label for="q4b">2</label>
    <br/>
    <input type="radio" name="q4" value="3" id="q4c"><label for="q4c">3</label>
    <br/>
    <input type="radio" name="q4" value="4" id="q4d"><label for="q4d">4</label>
    <br/>
    <input type="radio" name="q4" value="5" id="q4e"><label for="q4e">5</label>
    <br/>
</ul>

<p class="question">5. Rate how you physically feel (e.g. lethargic 1 to energetic 5)?</p>

<ul class="answers">
    <input type="radio" name="q5" value="1" id="q5a"><label for="q5a">1</label>
    <br/>
    <input type="radio" name="q5" value="2" id="q5b"><label for="q5b">2</label>
    <br/>
    <input type="radio" name="q5" value="3" id="q5c"><label for="q5c">3</label>
    <br/>
    <input type="radio" name="q5" value="4" id="q5d"><label for="q5d">4</label>
    <br/>
    <input type="radio" name="q5" value="5" id="q5e"><label for="q5e">5</label>
    <br/>
</ul>

<button type="submit" onclick="alert(calculateTotal())">Submit</button>

Answer 4

您提供的代码无效的主要原因是您忘记从函数返回计算得分：

function calculateScore() {
   // your code...
   return score;
}

在开始下一个循环之前，您还需要确保每个循环都用大括号关闭。

但是，获取一组广播框值的最可读方法是使用如下的表单元素：

function calculateScore() {
  var formElement = document.getElementById("the-form"),
      score = 0;
  score += parseInt(formElement.q1.value);
  score += parseInt(formElement.q2.value);
  return score;
}

function displayScore() {
	document.getElementById("the-score").innerText = calculateScore();
}

<form id="the-form">

<input type="radio" name="q1" value=1 id="q1-a1"><label for="q1-a1">1</label>
<input type="radio" name="q1" value=2 id="q1-a2"><label for="q1-a2">2</label>
<input type="radio" name="q1" value=3 id="q1-a3"><label for="q1-a3">3</label>
<input type="radio" name="q1" value=4 id="q1-a4"><label for="q1-a4">4</label>
<input type="radio" name="q1" value=5 id="q1-a5"><label for="q1-a5">5</label>
<br>
<br>
<input type="radio" name="q2" value=1 id="q2-a1"><label for="q2-a1">1</label>
<input type="radio" name="q2" value=2 id="q2-a2"><label for="q2-a2">2</label>
<input type="radio" name="q2" value=3 id="q2-a3"><label for="q2-a3">3</label>
<input type="radio" name="q2" value=4 id="q2-a4"><label for="q2-a4">4</label>
<input type="radio" name="q2" value=5 id="q2-a5"><label for="q2-a5">5</label>

</form>

<button onclick="displayScore()">Calculate Score</button>
<br>
<output id="the-score"></output>

表单元素包含以表单中每个输入的name标记命名的属性，并且可以使用value属性访问它们的值。

通过将值从a..e更改为1..5，代码可以更简单。

在javaScript中添加已检查的单选框的值？

4 个答案: