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.
