<!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
>