获取所有选中的单选按钮值的总和并返回总数答案

【问题标题】：Getting the sum of all checked radio button values and returning the total获取所有选中的单选按钮值的总和并返回总数
【发布时间】：2020-11-10 03:19:35
【问题描述】：

我建立了一个表单，我需要它来获取所有选中的单选按钮的数值，将它们相加并在同一页面上返回总数。我的 HTML 和 javascript 代码如下：

  <form>
    <p>Question here</p>
      <input type="radio" class ="check" name="choose" value=1>never 
      <input type="radio" class ="check" name="choose" value=2>sometimes 
      <input type="radio" class ="check" name="choose" value=3>regularly 
      <input type="radio" class ="check" name="choose" value=4>always
      <br>
  </form>
  <form>
     <p>Question here</p>
      <input type="radio" class ="check" name="choose" value=1>never 
      <input type="radio" class ="check" name="choose" value=2>sometimes 
      <input type="radio" class ="check" name="choose" value=3>regularly 
      <input type="radio" class ="check" name="choose" value=4>always
      <br>
    </form>
    <form>
       <p>Question here</p>
      <input type="radio" class ="check" name="choose" value=1>never 
      <input type="radio" class ="check" name="choose" value=2>sometimes 
      <input type="radio" class ="check" name="choose" value=3>regularly 
      <input type="radio" class ="check" name="choose" value=4>always
      <br>
    </form>
    <form>
       <p>Question here</p>
      <input type="radio" class ="check" name="choose" value=1>never 
      <input type="radio" class ="check" name="choose" value=2>sometimes 
      <input type="radio" class ="check" name="choose" value=3>regularly 
      <input type="radio" class ="check" name="choose" value=4>always
      <br>
    </form>

    <form>

       <p>Question here</p>
      <input type="radio" class ="check" name="choose" value=1>never 
      <input type="radio" class ="check" name="choose" value=2>sometimes 
      <input type="radio" class ="check" name="choose" value=3>regularly 
      <input type="radio" class ="check" name="choose" value=4>always
      <br>

    </form>
    <form>
       <p>Question here</p>
      <input type="radio" class ="check" name="choose" value=1>never 
      <input type="radio" class ="check" name="choose" value=2>sometimes 
      <input type="radio" class ="check" name="choose" value=3>regularly 
      <input type="radio" class ="check" name="choose" value=4>always
      <br>
    </form>
    <form>

       <p>Question here</p>
      <input type="radio" class ="check" name="choose" value=1>never 
      <input type="radio" class ="check" name="choose" value=2>sometimes 
      <input type="radio" class ="check" name="choose" value=3>regularly 
      <input type="radio" class ="check" name="choose" value=4>always
      <br>
    </form>
    <form>
       <p>Question here</p>
      <input type="radio" class ="check" name="choose" value=1>never 
      <input type="radio" class ="check" name="choose" value=2>sometimes 
      <input type="radio" class ="check" name="choose" value=3>regularly 
      <input type="radio" class ="check" name="choose" value=4>always
      <br>
    </form>
    <form>
       <p>Question here</p>
      <input type="radio" class ="check" name="choose" value=1>never 
      <input type="radio" class ="check" name="choose" value=2>sometimes 
      <input type="radio" class ="check" name="choose" value=3>regularly 
      <input type="radio" class ="check" name="choose" value=4>always
      <br>
    </form>
    <form>
      <p>Question here</p>
      <input type="radio" class ="check" name="choose" value=1>never 
      <input type="radio" class ="check" name="choose" value=2>sometimes 
      <input type="radio" class ="check" name="choose" value=3>regularly 
      <input type="radio" class ="check" name="choose" value=4>always
    </form>
    <br>
      <input type ="button" name="resultButton" id = "totalSum" onclick = "handleClick();" value = "Get Result" >
      <br>
      <br>

JavaScript：

function handleClick(input){
  var selected = document.getElementsByClassName(".check").value;
  for (var i = 0; i < selected.length; ++i) { 
    if(selected.checked== true){
      alert("Your total is"+ i+ "...");
    }
    else{
      alert( "You didn't select an answer for all questions")
    }
  }  
};

【问题讨论】：

你没有得到每个选定的项目。应该是selected[i].checked 和var selected = document.getElementsByClassName(".check");
@CodeLover 不应该 selected = document.getElementsByClassName(".check"); 是 selected = document.getElementsByClassName("check");。您只需要. 将class 与其他查询选择器或jQuery 一起定位到selected 变量试图返回这些元素的value，因此您的for 循环将无法运行如你所愿。
是的。我的错误
谢谢大家的帮助。奇怪的是，当我单击此页面上的“运行代码 sn-p”按钮时，你们给我的想法起作用了。但是当我使用浏览器（Chrome）从 IDE（括号）运行时，它总是说：Uncaught ReferenceError: handleClick is not defined at HTMLInputElement.onclick.
更改了句子以使其更有意义，并删除了更有意义的额外解释。

标签： javascript forms

【解决方案1】：

代码有3处错误：

var selected = document.getElementsByClassName("check"); 将“.check”删除为“check”

选中的变量是数组，所以访问每个元素selected[i].checked，加上索引i。

你有一个输入参数，即使运行代码也没有坏处，但是在 HTML 和 JS 代码中你没有使用 'input' 变量，所以删除它。

另外根据问题，您需要总和，因此如果选中复选框，则必须使用变量和总和。

最终代码可以写成如下：

function handleClick(){
      var selected = document.getElementsByClassName("check");
      var totals = 0;
      for (var i = 0; i < selected.length; ++i) { 
      if(selected[i].checked == true){
         totals = totals + selected[i].value;

      }
       else{
           alert( "You didn't select an answer for all questions")
      }
 }
 alert("Your total is"+ totals + "...");  
};

【讨论】：

【解决方案2】：

您的代码中有一些拼写错误。您可以使用querySelectorAll 选择所有checked 单选按钮。然后使用forEach() 计算总数。试试下面的方法：

function handleClick(input){
  var chk = document.querySelectorAll(".check:checked");
  var total = 0;
  if(!chk.length){
    alert( "You didn't select an answer for all questions")
  }
  else{
    chk.forEach(function(el){
       total += parseInt(el.getAttribute('value'));
    });
    alert("Your total is: "+ total);
  } 
};

<form>
  <p>Question here</p>
    <input type="radio" class ="check" name="choose" value=1>never 
    <input type="radio" class ="check" name="choose" value=2>sometimes 
    <input type="radio" class ="check" name="choose" value=3>regularly 
    <input type="radio" class ="check" name="choose" value=4>always
    <br>
</form>
<form>
   <p>Question here</p>
    <input type="radio" class ="check" name="choose" value=1>never 
    <input type="radio" class ="check" name="choose" value=2>sometimes 
    <input type="radio" class ="check" name="choose" value=3>regularly 
    <input type="radio" class ="check" name="choose" value=4>always
    <br>
  </form>
  <form>
     <p>Question here</p>
    <input type="radio" class ="check" name="choose" value=1>never 
    <input type="radio" class ="check" name="choose" value=2>sometimes 
    <input type="radio" class ="check" name="choose" value=3>regularly 
    <input type="radio" class ="check" name="choose" value=4>always
    <br>
  </form>
  <form>
     <p>Question here</p>
    <input type="radio" class ="check" name="choose" value=1>never 
    <input type="radio" class ="check" name="choose" value=2>sometimes 
    <input type="radio" class ="check" name="choose" value=3>regularly 
    <input type="radio" class ="check" name="choose" value=4>always
    <br>
  </form>

  <form>

     <p>Question here</p>
    <input type="radio" class ="check" name="choose" value=1>never 
    <input type="radio" class ="check" name="choose" value=2>sometimes 
    <input type="radio" class ="check" name="choose" value=3>regularly 
    <input type="radio" class ="check" name="choose" value=4>always
    <br>

  </form>
  <form>
     <p>Question here</p>
    <input type="radio" class ="check" name="choose" value=1>never 
    <input type="radio" class ="check" name="choose" value=2>sometimes 
    <input type="radio" class ="check" name="choose" value=3>regularly 
    <input type="radio" class ="check" name="choose" value=4>always
    <br>
  </form>
  <form>

     <p>Question here</p>
    <input type="radio" class ="check" name="choose" value=1>never 
    <input type="radio" class ="check" name="choose" value=2>sometimes 
    <input type="radio" class ="check" name="choose" value=3>regularly 
    <input type="radio" class ="check" name="choose" value=4>always
    <br>
  </form>
  <form>
     <p>Question here</p>
    <input type="radio" class ="check" name="choose" value=1>never 
    <input type="radio" class ="check" name="choose" value=2>sometimes 
    <input type="radio" class ="check" name="choose" value=3>regularly 
    <input type="radio" class ="check" name="choose" value=4>always
    <br>
  </form>
  <form>
     <p>Question here</p>
    <input type="radio" class ="check" name="choose" value=1>never 
    <input type="radio" class ="check" name="choose" value=2>sometimes 
    <input type="radio" class ="check" name="choose" value=3>regularly 
    <input type="radio" class ="check" name="choose" value=4>always
    <br>
  </form>
  <form>
     <p>Question here</p>
    <input type="radio" class ="check" name="choose" value=1>never 
    <input type="radio" class ="check" name="choose" value=2>sometimes 
    <input type="radio" class ="check" name="choose" value=3>regularly 
    <input type="radio" class ="check" name="choose" value=4>always
  </form>
  <br>
    <input type ="button" name="resultButton" id = "totalSum" onclick = "handleClick();" value = "Get Result" >
    <br>
    <br>

【讨论】：

【解决方案3】：

试试这个。

    var all = document.getElementsByClassName("uncheck");
    var alen = all.length;
    while(alen--) {
      all[alen].onchange = function() {
        this.className = "check";
      }
    }
    function handleClick() {
      var selected = document.getElementsByClassName("check");
      var slen = selected.length;
      var answered = slen;
      var total = 0;
      while(slen--) {
        var se = selected[slen];
        if(se.checked) {
          total += parseInt(se.value);
        }
      }
      var questions = document.getElementsByTagName("form");
      if(answered < questions.length) {
        alert("You didn't select an answer for all questions");
      }
      else {
        alert("Your total is " + total + " ...");
      }
    }

enter code here
      <form>
        <p>Question here</p>
        <input type="radio" class ="uncheck" name="choose" value=1>never 
        <input type="radio" class ="uncheck" name="choose" value=2>sometimes 
        <input type="radio" class ="uncheck" name="choose" value=3>regularly 
        <input type="radio" class ="uncheck" name="choose" value=4>always
        <br>
      </form>
      <form>
         <p>Question here</p>
          <input type="radio" class ="uncheck" name="choose" value=1>never 
          <input type="radio" class ="uncheck" name="choose" value=2>sometimes 
          <input type="radio" class ="uncheck" name="choose" value=3>regularly 
          <input type="radio" class ="uncheck" name="choose" value=4>always
          <br>
        </form>
        <form>
           <p>Question here</p>
          <input type="radio" class ="uncheck" name="choose" value=1>never 
          <input type="radio" class ="uncheck" name="choose" value=2>sometimes 
          <input type="radio" class ="uncheck" name="choose" value=3>regularly 
          <input type="radio" class ="uncheck" name="choose" value=4>always
          <br>
        </form>
        <form>
           <p>Question here</p>
          <input type="radio" class ="uncheck" name="choose" value=1>never 
          <input type="radio" class ="uncheck" name="choose" value=2>sometimes 
          <input type="radio" class ="uncheck" name="choose" value=3>regularly 
          <input type="radio" class ="uncheck" name="choose" value=4>always
          <br>
        </form>
        <form>
           <p>Question here</p>
          <input type="radio" class ="uncheck" name="choose" value=1>never 
          <input type="radio" class ="uncheck" name="choose" value=2>sometimes 
          <input type="radio" class ="uncheck" name="choose" value=3>regularly 
          <input type="radio" class ="uncheck" name="choose" value=4>always
          <br>
        </form>
        <form>
           <p>Question here</p>
          <input type="radio" class ="uncheck" name="choose" value=1>never 
          <input type="radio" class ="uncheck" name="choose" value=2>sometimes 
          <input type="radio" class ="uncheck" name="choose" value=3>regularly 
          <input type="radio" class ="uncheck" name="choose" value=4>always
          <br>
        </form>
        <form>

           <p>Question here</p>
          <input type="radio" class ="uncheck" name="choose" value=1>never 
          <input type="radio" class ="uncheck" name="choose" value=2>sometimes 
          <input type="radio" class ="uncheck" name="choose" value=3>regularly 
          <input type="radio" class ="uncheck" name="choose" value=4>always
          <br>
        </form>
        <form>
           <p>Question here</p>
          <input type="radio" class ="uncheck" name="choose" value=1>never 
          <input type="radio" class ="uncheck" name="choose" value=2>sometimes 
          <input type="radio" class ="uncheck" name="choose" value=3>regularly 
          <input type="radio" class ="uncheck" name="choose" value=4>always
          <br>
        </form>
        <form>
           <p>Question here</p>
          <input type="radio" class ="uncheck" name="choose" value=1>never 
          <input type="radio" class ="uncheck" name="choose" value=2>sometimes 
          <input type="radio" class ="uncheck" name="choose" value=3>regularly 
          <input type="radio" class ="uncheck" name="choose" value=4>always
          <br>
        </form>
        <form>
           <p>Question here</p>
          <input type="radio" class ="uncheck" name="choose" value=1>never 
          <input type="radio" class ="uncheck" name="choose" value=2>sometimes 
          <input type="radio" class ="uncheck" name="choose" value=3>regularly 
          <input type="radio" class ="uncheck" name="choose" value=4>always
        </form>
        <br>
        <input type ="button" name="resultButton" id = "totalSum" onclick="handleClick()" value = "Get Result" >

【讨论】：