Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('input[type="radio"]').click(function() {
$('#sum').text($('input[name="option1"]:checked').val()*1 + $('input[name="option2"]:checked').val()*1);
});
});
</script>
</head>
<body>
<div style="display: flex;">
<div>
<form>
<label><input type="radio" name="option1" value="10" checked>10</label><br>
<label><input type="radio" name="option1" value="20">20</label><br>
</form>
</div>
<div>
<form>
<label><input type="radio" name="option2" value="100" checked>100</label><br>
<label><input type="radio" name="option2" value="200">200</label><br>
</form>
</div>
</div>
<div>
Sum: <span id="sum">15</span>
</div>
</body>
</html>
Explanation
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.
Conclusion
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.
452 Views
