jQuery 输入数组，添加值

Question

考虑像下面这样的几十个输入。当用户在 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/，但没有成功。

有人可以帮忙吗？

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

注意：我不完全确定我使用的公式是否符合您的需要。您可能想要更改它。

Answer 2

这是一个工作片段，使用 jQuery，应该可以满足您的需求：
（查看我的代码片段中的评论）

// 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_()

希望对您有所帮助。

Answer 3

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

jQuery 输入数组，添加值

jQuery array of inputs, add values

arrays

jquery

input

add