Question

我想用jQuery对SUM 4字段进行SUM并将小数（例如：0.5）放在另一个字段中。

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

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

我有这个输入字段，因为＆＃39; LiquidRatioTotal＆＃39;是结果字段：

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

我怎么能意识到这一点？

非常感谢。

Answer 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 />

Answer 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);
});

Answer 3

这个怎么样？

var Sum = 0;

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

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

Answer 4

谢谢大家，我找到了另一种有效的方法：

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

Answer 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放好。是时候继续前进了。

jQuery：SUM字段，如果填写完

5 个答案: