输入的jQuery数组，添加值答案

【问题标题】：jQuery array of inputs, add values输入的jQuery数组，添加值
【发布时间】：2018-10-22 11:12:45
【问题描述】：

考虑以下数十个输入。当用户在 GLOSA 和 AJUSTE 中键入新值时，我需要从 VALAUT 中减去 GLOSA 并添加 AJUSTE，然后将结果分别放在每一行中的 APAGAR 中。

<input type="hidden" id="valaut[]" name="valaut[0]" value="100" />
<input type="text"   id="glosa[]"  name="glosa[0]"  value="10" />
<input type="text"   id="ajuste[]" name="ajuste[0]" value="5" />
<input type="text"   id="apagar[]" name="apagar[0]" value="0" />
<br/>
<input type="hidden" id="valaut[]" name="valaut[1]" value="200" />
<input type="text"   id="glosa[]"  name="glosa[1]"  value="0" />
<input type="text"   id="ajuste[]" name="ajuste[1]" value="0" />
<input type="text"   id="apagar[]" name="apagar[1]" value="0" />

我尝试了很多方法，比如http://jsfiddle.net/rve232g8/，但都没有成功。

有人可以帮忙吗？

【问题讨论】：

标签： jquery arrays input add

【解决方案1】：

您可以使用jQuery 通配符作为选择器。

$('[name^=glosa], [name^=ajuste]').bind("change keyup input", function() {
  //Get the group number
  var group = $(this).attr('name').match(/\[(.*?)\]/)[1];

  //Get the values
  var valaut = $('[name="valaut[' + group + ']"]').val();
  var glosa = $('[name="glosa[' + group + ']"]').val();
  var ajuste = $('[name="ajuste[' + group + ']"]').val();

  //Check if number
  if (!isNaN(valaut) && !isNaN(glosa) && !isNaN(ajuste)) {

    //Calculate apagar 
    var apagar = Number(valaut) - Number(glosa) + Number(ajuste);

    //Set value for apagar
    $('[name="apagar[' + group + ']"]').val(apagar);
  } else {
    //Some input non numbers. Clear the apagar
    $('[name="apagar[' + group + ']"]').val("");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="valaut[]" name="valaut[0]" value="100" />
<input type="text" id="glosa[]" name="glosa[0]" value="10" />
<input type="text" id="ajuste[]" name="ajuste[0]" value="5" />
<input type="text" id="apagar[]" name="apagar[0]" value="0" />
<br/><br/>
<input type="hidden" id="valaut[]" name="valaut[1]" value="200" />
<input type="text" id="glosa[]" name="glosa[1]" value="0" />
<input type="text" id="ajuste[]" name="ajuste[1]" value="0" />
<input type="text" id="apagar[]" name="apagar[1]" value="0" />

注意：我不完全确定我使用的公式是否准确满足您的需求。你可能想改变它。

【讨论】：

【解决方案2】：

在@Edie 和@Takit Isy 的这两种解决方案中，我得到了我需要的确切结果。非常感谢！

【讨论】：

你应该删除它，因为它不是答案！ :) 还请查看我更新的答案，代码现在更简单了。

【解决方案3】：

这是一个使用 jQuery 的工作 sn-p，应该可以满足您的需求：
（见我的sn-p中的cmets）

// Update function
function update() {
  var valaut, glosa, ajuste;
  // For each "apagar", do the following:
  $('input[name^=apagar]').each(function(index) {
    // Get values
    valaut = $('input[name^=valaut]')[index].value;
    glosa = $('input[name^=glosa]')[index].value;
    ajuste = $('input[name^=ajuste]')[index].value;
    // Store the result (calculation using unary operator)
    $(this).val(+valaut - +glosa + +ajuste);
  });
}

// Launch function on load
update();
// Bind update function on inputs changes
$('input[name^=glosa], input[name^=ajuste]').on('keyup', update);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="valaut[]" name="valaut[0]" value="100" disabled/>
<input type="text" class="glosa[]" name="glosa[0]" value="10" />
<input type="text" class="ajuste[]" name="ajuste[0]" value="5" />
<input type="text" class="apagar[]" name="apagar[0]" value="0" />
<br/>
<input type="text" class="valaut[]" name="valaut[1]" value="200" disabled/>
<input type="text" class="glosa[]" name="glosa[1]" value="0" />
<input type="text" class="ajuste[]" name="ajuste[1]" value="0" />
<input type="text" class="apagar[]" name="apagar[1]" value="0" />
<br />
<p><u>Comments:</u><br /> Changed id to class in the inputs, as ids must be unique.<br /> Removed "hidden" and added "disabled" to see the "valauts" for testing.</p>

编辑：我添加了一元运算符的使用，因为它使代码变得非常简单！
文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus_()

希望对你有帮助。

【讨论】：