如何在可重复字段容器内动态求和输入值？

Question

我在 HTML 中有以下标记：

<div class="rf-row count-container">
    <input class="sum-monthly">
        <div class="sub-rf-row">
            <input class="add-monthly">
        </div>
       <div class="sub-rf-row">
            <input class="add-monthly">
       </div>
       <div class="sub-rf-row template">
            <input class="add-monthly">
       </div>
</div>

我想将每个子 rf 行（不包括模板子 rf 行）内的类“add-monthly”的所有输入添加到 rf 行（它的父行）内的“sum-monthly”。

我想在用户输入之前计算总和值（在 document.ready 上）。 以及在每月添加输入之一的“keyup”事件上动态更新它。

我怎样才能最好地在 jQuery 中做到这一点？

Answer 1

你可以做这样的事情......

 $(document).ready(function()
 {

   updateValues()
   $('.sub-rf-row').keyup(updateValues); 

  });


function updateValues()
{
   var sum=0;
   $('.sub-rf-row:not(.template) input').each(function(){

     sum+=parseInt($(this).val()=='' ? 0 : $(this).val());
   });


    $('.sum-monthly').val(sum);
  }

https://jsfiddle.net/rt42fz9q/13/

Answer 2

为了实现您的目标，您需要引用所需的input字段，遍历它们并计算它们的总和，最后将该总和放在.add-monthly字段中。 但是您需要注意某些字段中可能存在的非数字值，因此，在下面的sumUpdate函数中，只有当该值是有效数字时，我才将input字段的值添加到总和中，十进制数字也是允许。

这是一个片段来说明所有所说的内容：

 $(function(){ var sumInput = $('.rf-row input.sum-monthly'),     /* the 'sumInput' variable is the input field that will display the sum of the other inputs */     inputs = $('.sub-rf-row:not(.template) input.add-monthly'); /* the 'inputs' variable is an array containing the input fields with the class '.add-monthly' that are under '.sub-rf-row' element which doesn't have  a '.template' class */ // Call the updateSum function to calculate the sum directly after the document has loaded. updateSum(); // Adding KeyUp event listener to the inputs inputs.on('keyup', updateSum); // Implementation of the updateSum function that will calcule the sum of the input fields. function updateSum() {   sum = 0;   inputs.each(function() {     var val = +$(this).val(); // Notice the plus sign in front of $(this).val() with we cast the input value to an integer, the val  variable could contain of value of NaN if the input value can't be casted to an input(in other words if the input value contains non-numeric characters). With that we also allow decimal numbers.     sum += (val.toString() != 'NaN') ? val:0; // We only add valid numbers, otherwise we add 0 to the sum variable.  });   sumInput.val(sum.toFixed(2).replace('.00', '')); // Assign the sum variable's value to the sumInput, allowing precision to only 2 decimal digits, and also stripping '.00' from the sum variable if it contains a natural number(like 2.00 => 2, 10.00 => 10, but any decimal number will remain the same: 2.8 => 2.80, 12.97 => 12.97). } });

 <!-- I added some values for the input fields with '.add-monthly' class just to show that the 'updateSum' function executes when the document is loaded --> <div class="rf-row count-container"> <input class="sum-monthly"> <div class="sub-rf-row">           <input class="add-monthly" value="2.4"> </div> <div class="sub-rf-row">           <input class="add-monthly" value="8.2"> </div> <div class="sub-rf-row template"> <input class="add-monthly"> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ps：我在上面的代码中添加了一些有用的注释，请尝试阅读它们，因为它们可能对您有所帮助。

希望我能进一步推动你。

Answer 3

这可能对你有帮助

    <!DOCTYPE html>
    <html>
    <head>
      Demo
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>

    <div class="rf-row count-container">
       <input class="sum-monthly">
            <div class="sub-rf-row">
                <input class="add-monthly" value="5">
            </div>
           <div class="sub-rf-row">
                <input class="add-monthly" value="5">
           </div>
           <div class="sub-rf-row template">
                <input class="add-monthly" value="5">
           </div>
    </div>

    <script>
   $(document).ready(function(){
  var value = 0;
    $('.count-container .sub-rf-row').each(function(){
      value += parseInt($(this).find('.add-monthly').val()) ? parseInt($(this).find('.add-monthly').val()) : 0
    })
   $('.sum-monthly').val(value);
});

    </script>
    </body>
    </html>

https://codepen.io/anon/pen/gdpZpR?editors=1010

如何在可重复字段容器内动态求和输入值？

问题描述

3 个解决方案

解决方案1
0 2018-08-27 11:56:13

解决方案2
0 2018-08-27 13:36:38

解决方案3
-1 2018-08-27 11:55:34

如何在可重复字段容器内动态求和输入值？

问题描述

3 个解决方案

解决方案1 0 2018-08-27 11:56:13

解决方案2 0 2018-08-27 13:36:38

解决方案3 -1 2018-08-27 11:55:34

解决方案1
0 2018-08-27 11:56:13

解决方案2
0 2018-08-27 13:36:38

解决方案3
-1 2018-08-27 11:55:34