How might I calculate the sum of radio button values using jQuery?

javascript jquery html radio-button

22,959

Solution 1

Plugin schmugin. Get rid of your onclick and try this:

$("input[type=radio]").click(function() {
    var total = 0;
    $("input[type=radio]:checked").each(function() {
        total += parseFloat($(this).val());
    });

    $("#totalSum").val(total);
});

Solution 2

Untitled Document

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

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

            var sum=parseInt(val1) + parseInt(val2);
            document.getElementById('totalSum').value=sum;
        }
    </script>
</head>
<body>
    Choose a number:<br>
    <form name="form1" id="form1" runat="server">
        <br>
        <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">159
        <br>
        <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">259
        <br>
    </form>

    Choose another number:<br>
    <form name="form2" id="form2" runat="server">
        <br>
        <input id="rdo_1" type="radio" value="345" name="price2" onclick="DisplayPrice(this.value);">345
        <br>
        <input id="rdo_2" type="radio" value="87" name="price2" onclick="DisplayPrice(this.value);">87
        <br>
    </form>
    <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">


</body>

The code above will dinamically sum the checked values from both groups. parseInt will convert to integers. Use parseFloat otherwise.

22,959

Author by

datisdesign

UI/UX Designer, Soccer fan, Gamer

Updated on August 05, 2020

Comments

datisdesign over 3 years
I am trying to create a form with many groups containing many radio buttons. When the user selects a button, I would like to calculate the sum of each selected radio button value and show this sum to the user.

I have found a plugin for jQuery which will do the calculation, this plugin use the name attribute of the buttons to calculate. For example, it will sum the values of all buttons which have the name sum.

So far, I have tried two ways of setting this up: in the first method, I create a hidden field for each group to hold the sum of the selected values inside it, this hidden field gets the value but the problem is that the total value will not update when a user selects a button. My code looks like this:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="jquery.js" type="text/javascript">
        </script>
        <script src="calc.js" type="text/javascript">
        </script>
        <script src="calc_f.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            function DisplayPrice(price){
                $('#spn_Price').val(price);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type="hidden" id="spn_Price" name="sum" value="">
            <br>
            <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">
            <br>
            <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">
            <br>
            <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">
        </form>
    </body>
</html>
```
In this code, the input tag with the name totalSum is where the value will update, but it won't update when changing the buttons.

As I said before, the reason why I use a hidden field is to hold each group's subtotal. It has the name sum, which indicates to the plugin that it should be added to others.

I dont know if this is the right way to do this, i have tried to change the name attribute of the buttons when user click them to sum but that didn`t work either!

Here is plugin address : http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

How can I do this ?
Mark Hurd over 14 years

+1. This is why it's important to learn the bare basics of a language before learning a framework. No reason at all to bring a plugin into this particular problem.
Sapphire over 11 years

How to specify a form name in $("input[type=radio]").click(function() { so that it only takes the radio buttons in a particular form and not all the ones on the page?