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.
2 answers
solution1
2 ACCPTED 2017-06-21 22:32:24
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
solution2
1 2017-06-21 22:35:35
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>
PS Deleted Question 4 because there is a limit for answer length.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Adding and subtracting selected radio buttons based on their values
Javascript adding values to radio buttons to input price
Adding horizontal radio buttons
Problem solving, radio buttons adding values on textbox. Improving solution
jquery adding and subtracting values while clicking on radio buttons
Vanilla JS selectors help for adding values from a set of radio buttons
Javascript not adding selected values in radio buttons when running function
radio buttons and passing values
Radio buttons values not showing
Adding total of checked Radio Buttons
Related Tags