Getting the sum of all checked radio button values and returning the total

Question

I got a form built and I need it to get the number value of all checked radio buttons, sum them and return the total on the same page. My HTML and javascript code are below:

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

Answer 1

There are 3 mistakes in the code:

1. var selected = document.getElementsByClassName("check"); Removed the ".check" to "check"

2. The selected variable is array, so access each element selected[i].checked , index i is added.

3. You have a input parameter, even its not harm to run the code, but in HTML and JS code you are not using 'input' variable, so remove it.

4. Also according to question you need the sum, so you have to use a variable and sum if checkbox are checked.

Final code can be written as follows:

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

Answer 2

You have some typos in your code. You can use querySelectorAll to select all the checked radio buttons. Then use forEach() to calculate the total. Try the following way:

 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>

Answer 3

Try this.

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