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

How To Use jQuery To Calculate The Sum

Calculating the sum of radio button values using jQuery involves selecting the radio buttons and attaching a click event listener. When a radio button is clicked, the value of each selected radio button is retrieved and added together. The resulting sum is then displayed in a designated element using jQuery's text() method. This process allows for the easy calculation and display of the sum of radio button values on a web page.


<!DOCTYPE html>
   <script src=""></script>
      $(function() {
         $('input[type="radio"]').click(function() {
            $('#sum').text($('input[name="option1"]:checked').val()*1 + $('input[name="option2"]:checked').val()*1);
   <div style="display: flex;">
            <label><input type="radio" name="option1" value="10" checked>10</label><br>
            <label><input type="radio" name="option1" value="20">20</label><br>
            <label><input type="radio" name="option2" value="100" checked>100</label><br>
            <label><input type="radio" name="option2" value="200">200</label><br>
      Sum: <span id="sum">15</span>


  • The script uses jQuery's $(function() {}) shorthand for the $(document).the ready() function waits for the document to be fully loaded before executing the code.

  • The click() function is attached to all radio buttons and triggers whenever one is clicked. It calculates the sum of the selected radio button values and displays it in the #sum span element using the text() function. The sum calculation is simplified using the val() function to get the selected radio button value, multiplied by 1 to ensure it is treated as a number.


In this article, we have understood how to calculate the sum of radio buttons using jquery. In conclusion, calculating the sum of radio button values using jQuery is a simple process that involves assigning values to each radio button, selecting the checked buttons using jQuery, and summing up their values. The resulting sum can then be displayed on the web page.

Updated on: 17-Apr-2023


Kickstart Your Career

Get certified by completing the course

Get Started