Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 02 Sep, 2022
Improve Article
Save Article

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:

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=
    </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>


Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!