获取所有已检查单选按钮值的总和并返回总计

时间：2018-02-16 01:19:50

标签： javascript forms

我有一个构建的表单，我需要它来获取所有选中的单选按钮的数字值，将它们相加并在同一页面上返回总数。 我的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")
    }
  }  
};

3 个答案:

答案 0 :(得分：0)

代码中有3个错误：

  
      

  1. var selected = document.getElementsByClassName（“check”）;   删除了“.check”以“检查”

    2.   

  2. 所选变量是数组，因此访问每个元素selected[i].checked，添加索引i。

    3.   

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

    4.   

  4. 另外根据问题你需要总和，所以如果选中复选框，你必须使用变量和总和。

    5.   

最终代码可以写成如下：

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 + "...");  
};

答案 1 :(得分：0)

您的代码中存在一些拼写错误。您可以使用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>

答案 2 :(得分：0)

试试这个。

    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" >

相关问题
最新问题