How to calculate the sum of radio button values using jQuery ?

Last Updated : 23 Jul, 2025

In this article, we will see how to calculate the sum of radio button values using jQuery. To add the values of radio buttons, we will use the addition arithmetic operator.

Approach: First, we will use radio buttons to select two numbers i.e. number1 and number2. If the user clicks on the radio button value, then the user selects the value and gets this value by using the jQuery val() method and use the parseInt() method to convert the value into a number. After selecting both numbers values, the user clicks on the "Calculate Sum" button to calculate the sum of the selected radio button values.

Example: In this example, we will use the above approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>
        Calculate the sum of radio
        button values using jQuery
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <style>
        h1,
        h3 {
            text-align: center;
        }

        .GFG {
            width: 350px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        Calculate the sum of radio
        button values using jQuery
    </h3>
    <div class="GFG">
        <p>
            <label for="num1">Select First Number: </label>
            <input type="radio" name="fnum" value="10">10
            <input type="radio" name="fnum" value="20">20
            <input type="radio" name="fnum" value="30">30
        </p>
        <p>
            <label for="num1">Select Second Number: </label>
            <input type="radio" name="snum" value="10">10
            <input type="radio" name="snum" value="20">20
            <input type="radio" name="snum" value="30">30
        </p>
        <button>Calculate Sum</button>
        <p class="res"></p>
    </div>
    <script>
        $(document).ready(function () {
            let fnum = 0, snum = 0;
            $('input[name="fnum"]').on("click", function () {
                fnum = parseInt($('input[name="fnum"]:checked').val());

            });
            $('input[name="snum"]').on("click", function () {
                snum = parseInt($('input[name="snum"]:checked').val());
            });
            $("button").on('click', function () {
                let sum = fnum + snum;
                $(".res").html("Sum of Two Numbers: " + sum);
            });
        });
    </script>
</body>

</html>