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

• Last Updated : 02 Sep, 2022

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

 ` ` `<``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 ` `    `` ` ` `  `    ``<``script` `src``= ` `"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"``> ` `    `` ` ` `  `    ``<``style``> ` `        ``h1, ` `        ``h3 { ` `            ``text-align: center; ` `        ``} ` ` `  `        ``.GFG { ` `            ``width: 350px; ` `            ``margin: 0 auto; ` `        ``} ` `    `` ` ` ` ` `  `<``body``> ` `    ``<``h1` `style``=``"color: green;"``> ` `        ``GeeksforGeeks ` `    `` ` ` `  `    ``<``h3``> ` `        ``Calculate the sum of radio ` `        ``button values using jQuery ` `    `` ` `    ``<``div` `class``=``"GFG"``> ` `        ``<``p``> ` `            ``<``label` `for``=``"num1"``>Select First Number: ` `            ``<``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``> ` `            ``<``label` `for``=``"num1"``>Select Second Number: ` `            ``<``input` `type``=``"radio"` `name``=``"snum"` `value``=``"10"``>10 ` `            ``<``input` `type``=``"radio"` `name``=``"snum"` `value``=``"20"``>20 ` `            ``<``input` `type``=``"radio"` `name``=``"snum"` `value``=``"30"``>30 ` `        `` ` ` `  `        ``<``button``>Calculate Sum ` ` `  `        ``<``p` `class``=``"res"``> ` `    `` ` ` `  `    ``<``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); ` `            ``}); ` `        ``}); ` `    `` ` ` ` ` `  ``

Output:

My Personal Notes arrow_drop_up
Related Articles