How do I get the sum of radio buttons groups using parameters instead of values

Question

I have multiple sets of radio buttons where the selected values of each set need to be added and displayed to the user. So far I have been changing the values in the function in a switch statement to handle the addition.

<form name="config" id="config">
<div class="row-fluid">
    <h3>Memory</h3>
    <input type="radio" name="section1" value="4gb" onclick="changePrice(0)" checked>4gb<br>
    <input type="radio" name="section1" value="8gb" onclick="changePrice(100)">8gb (+$100)<br>
    <input type="radio" name="section1" value="16gb" onclick="changePrice(200)">16gb (+$200)
</div>
<div class="row-fluid">
    <h3>Primary Hard Drive</h3>
    <input type="radio" name="section2" value="dell" onclick="changePrice(0)" checked>Dell<br>
    <input type="radio" name="section2" value="asus" onclick="changePrice(100)">Asus(+$100)
</div> 
</form>
<div id="price"></div>

The script I am using right now is

var displayPrice = document.getElementById("price");
var baseNum = 200;
displayPrice.innerHTML = baseNum;

function(changePrice){
    var val1, val2;
    switch(document.config.section1.value){
        case "4gb":
            val1 = 0;
            break;
        case "8gb":
            val1 = 100;
            break;
        case "16gb":
            val1 = 200;
            break;
        default:
            val1 = 0;
    }
    switch(document.config.section2.value){
        case "dell":
            val1 = 0;
            break;
        case "asus":
            val1 = 100;
            break;
        default:
            val1 = 0;
    }
    var sum = val1 + val2 + baseNum;
    displayPrice.innerHTML = sum;
}

Is there a way I can do these calculations using the parameters passed through the changePrice function (so I don't have to change the values in the switch statements)?

possible duplicate of [How to get the value of a selected radio button using its name in jQuery?](http://stackoverflow.com/questions/986120/how-to-get-the-value-of-a-selected-radio-button-using-its-name-in-jquery) — Interrobang, Aug 28 '14 at 22:17
You can access other attributes of a radio button, not just its value. You might find `data-` attributes helpful here. — Interrobang, Aug 28 '14 at 22:18
`function(changePrice){` is probably not doing what you intend to do. The statement declares an anonymous function with a single parameter, `changePrice` and tosses it away, being in void context. — amphetamachine, Aug 28 '14 at 22:18

score 0 · Answer 1 · answered Aug 28 '14 at 22:24

If you change your function definition to the following, it will take in your parameter.

function changePrice(val1)

If you could change your the value attribute on each of your input fields to contain your increment value, it would make the process of calculating your sum much easier. (This may not be appropriate to the problem you are trying to solve.

Basic solution with jQuery

var sum = $("input[name=section1]").val() + $("input[name=section2]").val();

If your list is very long, you could iterate over your radio button sets with jQuery

var sum = 0;
$("input[type=radio]").each(function(){sum += $(this).val();});

score 0 · Accepted Answer · answered Aug 28 '14 at 23:07

Here's how to do this without jQuery.

You'll need to tell the changePrice function which section it should change the price for so you'll need to change the calls to look like this changePrice(1, 100) where 1 is the section and 100 is the price change. Then you can collect all the section prices individually and sum them like so:

var displayPrice = document.getElementById("price");
var baseNum = 200;
displayPrice.innerHTML = baseNum;
var sections = {};

function changePrice(section,val){
    // add or update the section value
    sections[section] = val;
    // start with the base price
    var sum = baseNum;
    // loop over all the sections and add them to the base price
    for(var key in sections) {
      sum = sections[key] + sum;
    }
    displayPrice.innerHTML = sum;
}

Here's a jsfiddle

score 0 · Answer 3 · answered Feb 16 '16 at 10:33

<html>
<head>
<script type="text/javascript">
        function DisplayPrice(price){
            var val1 = 0;
            for( i = 0; i < document.form1.R1.length; i++ ){
                if( document.form1.R1[i].checked == true ){
                    val1 = document.form1.R1[i].value;
                }
            }

            var val2 = 0;
            for( i = 0; i < document.form2.R2.length; i++ ){
                if(document.form2.R2[i].checked == true ){
                    val2 = document.form2.R2[i].value;
                }
            }

            var sum=parseInt(val1) + parseInt(val2);
            document.getElementById('totalSum').innerHTML=sum;
        }
    </script>
</head>
<body>
    Choose a number:<br>
    <form name="form1" id="form1">
        <br>
        R1&nbsp;<input id="rdo_1" type="radio" value="5" name="R1" onClick="DisplayPrice(this.value);" checked>5
        <br>
        R1&nbsp;<input id="rdo_2" type="radio" value="10" name="R1" onClick="DisplayPrice(this.value);">10
        <br>
    </form>

    Choose another number:<br>
    <form name="form2" id="form2">
        <br>
        R2&nbsp;<input id="rdo_1" type="radio" value="15" name="R2" onClick="DisplayPrice(this.value);" checked>15
        <br>
        R2&nbsp;<input id="rdo_2" type="radio" value="20" name="R2" onClick="DisplayPrice(this.value);">20
        <br>
    </form>
   Your total is Rs = <span name="totalSum" id="totalSum" > 20</span>


</body>
</html>

How do I get the sum of radio buttons groups using parameters instead of values

3 Answers3