How to calculate the sum of radio button values using jQuery ? Last Updated : 29 May, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Comment More infoAdvertise with us Next Article How to change radio button state programmatically in jQuery ? V vkash8574 Follow Improve Article Tags : HTML jQuery-Methods HTML-Questions jQuery-Questions Similar Reads How to exclude HTML form radio button values from being submitted using jQuery ? Given an HTML form with form elements including some radio button values, the task is to exclude these values from being submitted using jQuery. There is one main approach that can be followed.Approach: Use this property and submit(), find(), and prop() methods in jQuery. We apply the submit() metho 3 min read How to make vertical Radio button controlgroups using jQuery Mobile? To create vertical radio button control groups using jQuery Mobile, you would utilize the framework's markup structure and styling classes. This ensures compatibility with mobile devices and enhances user interaction by presenting options in a stacked format. Example 1: The approach below shows how 1 min read How to make Mini vertical Radio button controlgroups using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making a mini vertical radio button control groups button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your proje 1 min read How to define the result of a calculation using HTML? The <output> tag is used to representing the result of a calculation performed by the client-side script such as JavaScript. The <output> tag is a new tag in HTML5 and it requires starting and ending tags. Syntax:<output> Results... </output>ApproachThe document starts with t 2 min read How to change radio button state programmatically in jQuery ? In this article, we will change the selected option of the radio button using jQuery. To select the value of the radio button we can set the "checked" to set to the desired option. For setting the property, we can use the prop() method in jQuery. Syntax: $(selector).prop("checked", true); Note: Sele 1 min read How to create Mini Horizontal Radio button controlgroups using jQuery Mobile? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making a Mini Horizontal Radio button control groups button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for y 1 min read Like