Adding values of radio buttons

Question

I'm putting together a questionnaire where each question has 4 options which are radio buttons. The radio buttons have a value attached to them that is weighted the way I need them. I have a javascript function that is changing the values when I select a radio button, however, even when the page is first loaded the values start out at 75 for some reason. I need the value from the first question 1A to be 0, 3, or 5 and then once question 1B is answered the value changes to 0, 3, 5, 6, 8, or 10. In other words the value of the newly selected radio is added to the value of the radio value from 1A. Here are the first few questions from my form.

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOneA">
            <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOneA" aria-expanded="true" aria-controls="collapseOneA">
               <span class="letter">a</span> Question 1A
            </a>
            </h4>
        </div>
        <div id="collapseOneA" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneA">
            <div class="panel-body">
                <label>
                    <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios11A" value="5" checked>
                    YES
                </label>
                <label>
                    <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios21A" value="0">
                    NO
                </label>
                <label>
                    <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios31A" value="3">
                    PARTIAL
                </label>
                <label>
                    <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios41A" value="0">
                    UNSURE
                </label>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwoA">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwoA" aria-expanded="false" aria-controls="collapseTwoA">
                  <span class="letter">b</span> Question 1B
                </a>
              </h4>
            </div>
            <div id="collapseTwoA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoA">
              <div class="panel-body">
                  <label>
                    <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios11B" value="5" checked>
                    YES
                  </label>
                  <label>
                    <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios21B" value="0">
                    NO
                  </label>
                  <label>
                    <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios31B" value="3">
                    PARTIAL
                  </label>
                  <label>
                    <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios41B" value="0">
                    UNSURE
                  </label>
              </div>
          </div>
      </div>
      <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThreeA">
              <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseThreeA" aria-expanded="false" aria-controls="collapseThreeA">
                  <span class="letter">c</span> Question1C
                  </a>
              </h4>
          </div>
          <div id="collapseThreeA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeA">
              <div class="panel-body">
                  <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios11C" value="5" checked>
                    YES
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios21C" value="0">
                    NO
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios31C" value="3">
                    PARTIAL
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios41C" value="0">
                    UNSURE
                  </label>
              </div>
          </div>
      </div>
      <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFourA">
              <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseFourA" aria-expanded="false" aria-controls="collapseFourA">
                  <span class="letter">d</span> Question 1D
                  </a>
              </h4>
          </div>
          <div id="collapseFourA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFourA">
              <div class="panel-body">
                  <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios11D" value="5" checked>
                    YES
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios21D" value="0">
                    NO
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios31D" value="3">
                    PARTIAL
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios41D" value="0">
                    UNSURE
                  </label>
              </div>
          </div>
      </div>
      <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFiveA">
              <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseFiveA" aria-expanded="false" aria-controls="collapseFiveA">
                  <span class="letter">e</span> Question 1E
                  </a>
              </h4>
          </div>
          <div id="collapseFiveA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFiveA">
              <div class="panel-body">
                  <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios11E" value="5" checked>
                    YES
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios21E" value="0">
                    NO
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios31E" value="3">
                    PARTIAL
                  </label>
                  <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios41E" value="0">
                    UNSURE
                  </label>
              </div>
          </div>
      </div>
  </div>

Here is my javascript functions:

function calcscore(){
    var score = 0;
    $(".calc:checked").each(function(){
        score+=parseInt($(this).val(),10);
    });
    $("input[name=sum]").val(score)
}
$().ready(function(){
    $(".calc").change(function(){
       calcscore()
    });
});

I have stuck my code into a JSFiddle here:

https://jsfiddle.net/Dhaderlie/bkdqaxnL/

If you test the form you'll see the weird values I'm getting.

Answer 1

You have two error in your code:

• First, you are calling ready on not on document
• Second, you have pre-checked values. So when load the page these will be counted. You can pre-check the radio with value 0

So the code will be:

function calcscore() {
  var score = 0;
  $(".calc:checked").each(function() {
    score += parseInt($(this).val(), 10);
  });
  $("input[name=sum]").val(score)
}
$(document).ready(function() {
  $(".calc").change(function() {
    calcscore()
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 readyImageRow">
      <h3 class="text-center readyTitle">Are You Ready?</h3>
      <p class="text-center readyExplanation">Know where you stand</p>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row surveyOpen">
    <h2 class="surveyTitle text-center">ASSESSMENT</h2>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <!-- Collapse group 1 -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <h4><b class="number">1</b> Question 1</h4>
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            <!-- Question group 1 -->
            <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOneA">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOneA" aria-expanded="true" aria-controls="collapseOneA">
                      <span class="letter">a</span> Question 1A
                    </a>
                  </h4>
                </div>
                <div id="collapseOneA" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneA">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios11A" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios21A" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios31A" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios1" id="optionsRadios41A" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwoA">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwoA" aria-expanded="false" aria-controls="collapseTwoA">
                      <span class="letter">b</span> Question 1B
                    </a>
                  </h4>
                </div>
                <div id="collapseTwoA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoA">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios11B" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios21B" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios31B" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios2" id="optionsRadios41B" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThreeA">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseThreeA" aria-expanded="false" aria-controls="collapseThreeA">
                      <span class="letter">c</span> Question1C
                    </a>
                  </h4>
                </div>
                <div id="collapseThreeA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeA">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios11C" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios21C" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios31C" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios3" id="optionsRadios41C" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFourA">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseFourA" aria-expanded="false" aria-controls="collapseFourA">
                      <span class="letter">d</span> Question 1D
                    </a>
                  </h4>
                </div>
                <div id="collapseFourA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFourA">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios11D" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios21D" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios31D" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios4" id="optionsRadios41D" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFiveA">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseFiveA" aria-expanded="false" aria-controls="collapseFiveA">
                      <span class="letter">e</span> Question 1E
                    </a>
                  </h4>
                </div>
                <div id="collapseFiveA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFiveA">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios11E" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios21E" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios31E" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios5" id="optionsRadios41E" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <!-- End question group 1 -->
          </div>
        </div>
      </div>
      <!-- Collapse group 2 -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              <h4><b>2</b> Question 2</h4>
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
            <!-- Question group 2 -->
            <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOneB">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneB" aria-expanded="true" aria-controls="collapseOneB">
                      <span class="letter">a</span> Question 2A
                    </a>
                  </h4>
                </div>
                <div id="collapseOneB" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneB">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios6" id="optionsRadios12A" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios6" id="optionsRadios22A" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios6" id="optionsRadios32A" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios6" id="optionsRadios42A" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwoB">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwoB" aria-expanded="false" aria-controls="collapseTwoB">
                      <span class="letter">b</span> Question 2B
                    </a>
                  </h4>
                </div>
                <div id="collapseTwoB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoB">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios7" id="optionsRadios12B" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios7" id="optionsRadios22B" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios7" id="optionsRadios32B" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios7" id="optionsRadios42B" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThreeB">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeB" aria-expanded="false" aria-controls="collapseThreeB">
                      <span class="letter">c</span> Question 2C
                    </a>
                  </h4>
                </div>
                <div id="collapseThreeB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeB">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios8" id="optionsRadios12C" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios8" id="optionsRadios22C" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios8" id="optionsRadios32C" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios8" id="optionsRadios42C" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFourB">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFourB" aria-expanded="false" aria-controls="collapseFourB">
                      <span class="letter">d</span> Question 2D
                    </a>
                  </h4>
                </div>
                <div id="collapseFourB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFourB">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios9" id="optionsRadios12D" value="0"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios9" id="optionsRadios22D" value="5"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios9" id="optionsRadios32D" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios9" id="optionsRadios42D" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFiveB">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFiveB" aria-expanded="false" aria-controls="collapseFiveB">
                      <span class="letter">e</span> Question 2E
                    </a>
                  </h4>
                </div>
                <div id="collapseFiveB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFiveB">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios10" id="optionsRadios12E" value="0"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios10" id="optionsRadios22E" value="5"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios10" id="optionsRadios32E" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios10" id="optionsRadios42E" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <!-- End question group 2 -->
          </div>
        </div>
      </div>
      <!-- Collapse group 3 -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              <h4><b>3</b> Question 3</h4>
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <div class="panel-body">
            <!-- Question group 3 -->
            <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOneC">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseOneC" aria-expanded="true" aria-controls="collapseOneC">
                      <span class="letter">a</span> Question 3A
                    </a>
                  </h4>
                </div>
                <div id="collapseOneC" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneC">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios11" id="optionsRadios13A" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios11" id="optionsRadios23A" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios11" id="optionsRadios33A" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios11" id="optionsRadios43A" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwoC">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwoC" aria-expanded="false" aria-controls="collapseTwoC">
                      <span class="letter">b</span> Question 3B
                    </a>
                  </h4>
                </div>
                <div id="collapseTwoC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoC">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios12" id="optionsRadios13B" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios12" id="optionsRadios23B" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios12" id="optionsRadios33B" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios12" id="optionsRadios43B" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThreeC">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseThreeC" aria-expanded="false" aria-controls="collapseThreeC">
                      <span class="letter">c</span> Question 3C
                    </a>
                  </h4>
                </div>
                <div id="collapseThreeC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeC">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios13" id="optionsRadios13C" value="5"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios13" id="optionsRadios23C" value="0"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios13" id="optionsRadios33C" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios13" id="optionsRadios43C" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFourC">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseFourC" aria-expanded="false" aria-controls="collapseFourC">
                      <span class="letter">d</span> Question 3D
                    </a>
                  </h4>
                </div>
                <div id="collapseFourC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFourC">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios14" id="optionsRadios13D" value="0"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios14" id="optionsRadios23D" value="5"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios14" id="optionsRadios33D" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios14" id="optionsRadios43D" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFiveC">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseFiveC" aria-expanded="false" aria-controls="collapseFiveC">
                      <span class="letter">e</span> Question 3E
                    </a>
                  </h4>
                </div>
                <div id="collapseFiveC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFiveC">
                  <div class="panel-body">
                    <label>
                      <input class="calc" type="radio" name="optionsRadios15" id="optionsRadios13E" value="0"> YES
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios15" id="optionsRadios23E" value="5"> NO
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios15" id="optionsRadios33E" value="3"> PARTIAL
                    </label>
                    <label>
                      <input class="calc" type="radio" name="optionsRadios15" id="optionsRadios43E" value="0"> UNSURE
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <!-- End question group 3 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>
<div class="row">
  <div class="col-xs-12">
    <input type="text" name="sum">
    <!-- <h4 class="status"> <b>Readiness Status: Reay to Buy</b> </h4>
<p class="statusMsg">Wow - thanks to all your hard work, you are ready to become a homeowner very soon! We'll help you with all the final details to complete the process.</p> -->
  </div>
</div>

P.S. Deleted Question 4 because there is a limit for answer length.

Answer 2

Your code is correct.

On Document Ready, you get the sum of all the checked values. Considering that when you load the page, you always check all the radio buttons, you simply get the sum of all the checked values.

You simply have to remove the checked property from the radio buttons, and you will have the result correctly updated when answering the questions.

In the following jsfiddle I just changed your example removing the checked attribute from your second question, and your output this time starts from 70 (because the second answer got 5 points more if checked)

https://jsfiddle.net/bkdqaxnL/2/

I hope it makes sense