如何用jQuery计算单选按钮的数值之和

如何用jQuery计算单选按钮的数值之和

在这篇文章中,我们将看到如何使用jQuery计算单选按钮的数值之和。为了增加单选按钮的值,我们将使用加法算术运算。

方法:首先,我们将使用单选按钮来选择两个数字,即数字1和数字2。如果用户点击单选按钮的值,那么用户就会选择该值,并通过使用jQuery val()方法获得该值,并使用parseInt()方法将该值转换成数字。在选择了两个数字值后,用户点击 “计算总和 “按钮来计算所选单选按钮值的总和。

示例:

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

输出:

如何用jQuery计算单选按钮的数值之和?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery 方法