jQuery数组输入，添加值

Question

考虑几个输入，如下面的那些。我需要减去GLOSA并从VALAUT中添加AJUSTE并将结果单独放在每行中的APAGAR中，因为用户在GLOSA和AJUSTE中键入新值。

<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

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

Answer 3

这是一个使用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_()

我希望它有所帮助。