Question

我正在尝试使用一组输入值来对值进行实时求和。

以下是示例：

SUM  <input id="proyected_analysis_expense_1" name="proyected_analysis_expense[name][]" type="text" value="">    

<script type="text/javascript">

  jQuery("#proyected_category_expense_1").live("change", function(){
    pce1_value = parseFloat(jQuery("#proyected_category_expense_1").val());
    total = pce1_value ;

    jQuery("#proyected_analysis_expense_1").val(total.toFixed(2));  
   });    
 </script>  

  FIELD1: <input id="proyected_category_expense_1" name="flow_budget[flow_budget_details_attributes][1][amount]" type="text" value=""></td></tr>

这是实时demo

enter image description here

问题在于总和不适用于演示

我希望使用动态信息

<script type="text/javascript">

  jQuery("#proyected_category_expense_1").live("change", function(){
    pce1_value = parseFloat(jQuery("#proyected_category_expense_1").val());
    pce2_value = parseFloat(jQuery("#proyected_category_expense_2").val());
    pce3_value = parseFloat(jQuery("#proyected_category_expense_3").val());
    .... ///this will continue without type
    total = pce1_value +  pce2_value +   .... ;   ///this will continue without type

    jQuery("#proyected_analysis_expense_1").val(total.toFixed(2));  
    jQuery("#proyected_analysis_expense_2").val(total.toFixed(2));  
    .... ///this will continue without type

   });    
 </script>

请有人可以帮我解决输入数组中的总和问题吗？

Answer 1

问题是你是将当前输入元素的值分配给总数而不是求和。

因此，不是添加多个更改处理程序，而是使用单个更改处理程序，然后添加所有目标输入元素值，如

＆＃13;

jQuery(".group input[id^='proyected_category_expense_']").live("change", function() {
  var totalval = 0.00;

  var $group = jQuery(this).closest('.group');
  $group.find("input[id^='proyected_category_expense_']").each(function() {
    totalval += (+this.value || 0)
  });

  $group.find('input[name="proyected_analysis_expense[name][]"]').val(totalval.toFixed(2));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="columns_1 group">
  <p>
    <label><span style="color:red">(*) </span>TOTAL SUM 1</label>
    <input id="proyected_analysis_expense_1" name="proyected_analysis_expense[name][]" type="text" value="">
    <a onclick="document.getElementById('div_1').style.display='';return false;">
      <img src="/images/standard/add.png" height="15" width="15">
    </a>
    <a onclick="document.getElementById('div_1').style.display='none';return false;">
      <img src="/images/standard/delete.png" height="15" width="15">
    </a>

  </p>
  <div id="div_1" style="margin: 15px 15px 0px; padding: 5px; border: 1px solid rgb(170, 170, 170);">
    <table>
      <tbody>
        <tr>
          <td><span style="color:red">(*) </span>FIELD1:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][1][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][1][category_expense_id]" type="hidden" value="1">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][1][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_1" name="flow_budget[flow_budget_details_attributes][1][amount]" onpaste="return false;" style="text-align:right" type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD2:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][2][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][2][category_expense_id]" type="hidden" value="2">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][2][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_2" name="flow_budget[flow_budget_details_attributes][2][amount]" onpaste="return false;" style="text-align:right" type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD3:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][3][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][3][category_expense_id]" type="hidden" value="3">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][3][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_3" name="flow_budget[flow_budget_details_attributes][3][amount]" onpaste="return false;" style="text-align:right" type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD4:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][4][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][4][category_expense_id]" type="hidden" value="4">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][4][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_4" name="flow_budget[flow_budget_details_attributes][4][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD5:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][5][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][5][category_expense_id]" type="hidden" value="5">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][5][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_5" name="flow_budget[flow_budget_details_attributes][5][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD6:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][6][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][6][category_expense_id]" type="hidden" value="6">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][6][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_6" name="flow_budget[flow_budget_details_attributes][6][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD7:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][7][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][7][category_expense_id]" type="hidden" value="7">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][7][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_7" name="flow_budget[flow_budget_details_attributes][7][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD8:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][8][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][8][category_expense_id]" type="hidden" value="8">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][8][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_8" name="flow_budget[flow_budget_details_attributes][8][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD9:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][9][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][9][category_expense_id]" type="hidden" value="9">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][9][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_9" name="flow_budget[flow_budget_details_attributes][9][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIELD10:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][30][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][30][category_expense_id]" type="hidden" value="30">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][30][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_30" name="flow_budget[flow_budget_details_attributes][30][amount]" onkeypress="return numbersOnly(this, event);" onpaste="return false;" style="text-align:right"
            type="text" value="">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <p></p>
</div>
<div class="columns_1 group">
  <p>
    <label><span style="color:red">(*) </span>TOTAL SUM 2</label>
    <input id="proyected_analysis_expense_2" name="proyected_analysis_expense[name][]" type="text" value="">
    <a onclick="document.getElementById('div_1').style.display='';return false;">
      <img src="/images/standard/add.png" height="15" width="15">
    </a>
    <a onclick="document.getElementById('div_1').style.display='none';return false;">
      <img src="/images/standard/delete.png" height="15" width="15">
    </a>

  </p>
  <div id="div_1" style="margin: 15px 15px 0px; padding: 5px; border: 1px solid rgb(170, 170, 170);">
    <table>
      <tbody>
        <tr>
          <td><span style="color:red">(*) </span>FIELD01:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][11][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][11][category_expense_id]" type="hidden" value="1">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][11][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_11" name="flow_budget[flow_budget_details_attributes][11][amount]" onpaste="return false;" style="text-align:right" type="text" value="">
          </td>
        </tr>
        <tr>
          <td><span style="color:red">(*) </span>FIEL0D2:</td>
          <td>
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][12][flow_budget_id]" type="hidden">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][12][category_expense_id]" type="hidden" value="2">
            <input id="proyected_category_expenses" name="flow_budget[flow_budget_details_attributes][12][analysis_expense_id]" type="hidden" value="1">
            <input autocomplete="off" class="validate[required,length[0,255]]" id="proyected_category_expense_12" name="flow_budget[flow_budget_details_attributes][12][amount]" onpaste="return false;" style="text-align:right" type="text" value="">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <p></p>
</div>

＆＃13;

Answer 2

您无需在代码中更改更多内容，只需在文本框中删除更改方法即可。我把一个常见的变化事件放在演示中。循环遍历每个文本框和所有值的总和。我试图让代码变得像你理解的一样简单。

jQuery(".group input[id^='proyected_category_expense_']").live("change", function() {
var totalval = 0.00;

   var $group = jQuery(this).closest('.group');
   $group.find("input[id^='proyected_category_expense_']").each(function() {
       totalval += (+this.value || 0)
   });

   $group.find('input[name="proyected_analysis_expense[name][]"]').val(totalval.toFixed(2));

   var finalsum = 0.00;    
    jQuery('input[name="proyected_analysis_expense[name][]"]').each(function(){
       finalsum += parseFloat(jQuery(this).val() || 0);
     });
  jQuery(".finalsum").html(finalsum);
});

演示：http://jsfiddle.net/patelbharat001/sp47rv1t/24/

如何对输入值数组求和？

2 个答案: