jQuery：SUM 字段（如果已填写）答案

【问题标题】：jQuery: SUM fields if they are filled outjQuery：SUM 字段（如果已填写）
【发布时间】：2017-05-21 14:32:29
【问题描述】：

我想用 jQuery 对 4 个字段求和，并将小数点（例如：0.5）放在另一个字段中。

第一个字段是必填字段，其他不是，如果填写第一个字段，则必须在结果字段中设置此值。

如果填写了任何其他字段，则必须将这些字段的总和放在结果字段中。

我有这个输入字段，因为 'LiquidRatioTotal' 是结果字段：

<input type="text" name="LiquidRatio1" id="LiquidRatio1" required>
<input type="text" name="LiquidRatio2" id="LiquidRatio2">
<input type="text" name="LiquidRatio3" id="LiquidRatio3">       
<input type="text" name="LiquidRatio4" id="LiquidRatio4">                                               
<input type="text" name="LiquidRatioTotal" id="LiquidRatioTotal" required>

我怎么能意识到这一点？

非常感谢。

【问题讨论】：

标签： jquery html input sum

【解决方案1】：

要实现这一点，您可以将input 事件处理程序附加到所有将其所有值相加的比率输入。为了使这更容易，您可以在输入上添加一个类来对它们进行分组。如果输入没有提供值，您可以将值默认为0 以进行计算。另请注意，我创建了“总计”字段readonly，因为我假设您不希望用户能够编辑它。试试这个：

$('.liquidRatio').on('input', function() {
  var total = 0;
  $('.liquidRatio').each(function() {
    total += parseFloat($(this).val()) || 0; 
  }); 
  $('#LiquidRatioTotal').val(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="LiquidRatio1" id="LiquidRatio1" class="liquidRatio" required />
<input type="text" name="LiquidRatio2" id="LiquidRatio2" class="liquidRatio" />
<input type="text" name="LiquidRatio3" id="LiquidRatio3" class="liquidRatio" />
<input type="text" name="LiquidRatio4" id="LiquidRatio4" class="liquidRatio" />
<input type="text" name="LiquidRatioTotal" id="LiquidRatioTotal" required readonly />

【讨论】：

【解决方案2】：

首先，删除结果输入属性'required'，并将其替换为'readonly'（因为它不是用于写入，而是用于读取）。
二、一些JS：

$('input[id*="LiquidRatio"]').on('input',function() {
  var sum=0;
  for (var i=1;i<=4;i++) {
    if ($('#LiquidRatio'+i).val() && !isNaN($('#LiquidRatio'+i).val())) {
        sum+=parseFloat($('#LiquidRatio'+i).val());
    }
  }
  $('#LiquidRatioTotal').val(sum);
});

【讨论】：

【解决方案3】：

这个怎么样？

var Sum = 0;

$('input[id^="LiquidRatio"]').each(function () {
    if ($(this).val() != "" && $(this).attr('id') != 'LiquidRatioTotal') {
        Sum = Sum + parseFloat($(this).val());
    }
});

$('#LiquidRatioTotal').val(Sum);

【讨论】：

【解决方案4】：

谢谢大家，我找到了另一个很好的方法：

$(document).on("change", ".liquidRatio", function() {
    var sum = 0;
    $(".liquidRatio").each(function(){
        sum += +$(this).val();
    });
    $(".totalRatio").val(sum.toFixed(1));
});

【讨论】：

【解决方案5】：

您为什么需要jQuery 答案？这不是 1997 年。原版 javascript 答案更短、更易于理解，并且不需要库依赖项。

我假设您想点击页面上的所有输入。如果没有，请更改选择器以仅点击您想要的那些（最简单的方法是向相关输入添加一个类，然后选择该类。）

首先，您需要一个可以为您获取所有这些数字的函数

const getNums = () => [... document.querySelectorAll('input')].map(i => i.value);

求和函数很简单：

const sum = arr => arr.reduce( (a,b) => a+b, 0 );

接下来，您需要一个函数来处理这些值。您没有说什么，所以，我将它们相加，然后将它们写给我假设存在的一些<div id="output">。

const outNums = nums => document.getElementById('output').innerHTML = sum(nums);

最后，您需要修饰输入，以便它们知道实际执行此操作。

document.querySelectorAll('input').onchange = () => outNums(getNums());

最终代码：

const getNums = ()   => [... document.querySelectorAll('input')].map(i => i.value || 0),
      sum     = arr  => arr.reduce( (a,b) => a+b, 0 ); 
      outNums = nums => document.getElementById('output').innerHTML = sum(nums);

document.querySelectorAll('input').onchange = () => outNums(getNums());

现在请把 jquery 收起来。是时候继续前进了。

【讨论】：