jquery 对所有输入值求和

📌 相关文章

📜 jquery 对所有输入值求和 - Javascript (1)

📅 最后修改于: 2023-12-03 15:16:48.802000 🧑 作者: Mango

在Web开发中，经常需要对表格、列表等元素中的所有输入值进行求和计算。jQuery是一个非常流行的JavaScript库，提供了简洁易用的API来实现这样的操作。

实现思路

要对所有输入值进行求和，我们需要先获取所有的输入元素，并将它们的值相加。jQuery提供了方便的选择器来选择元素，并提供了.val()方法来获取输入框的值。

// 获取所有输入框的值
var inputs = $('input');
var sum = 0;
inputs.each(function() {
  // 将输入框的值转换为数值，并加到总和中
  sum += Number($(this).val());
});
console.log(sum);

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery 对所有输入值求和</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <input type="number">
  <input type="number">
  <input type="number">
  <button id="btn">求和</button>
  <p id="result"></p>
  <script>
    $(function() {
      $('#btn').click(function() {
        var inputs = $('input');
        var sum = 0;
        inputs.each(function() {
          sum += Number($(this).val());
        });
        $('#result').text('总和为：' + sum);
      });
    });
  </script>
</body>
</html>

总结

使用jQuery对输入值求和非常简单，只需要使用选择器和.val()方法就可以了。此外，还可以使用其他方法来实现更加复杂的需求，例如筛选出符合条件的输入框等。