Question

我有这样的标记：

<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail" placeholder="Nama detail akun" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txtvolume[]" id="txtvolume" placeholder="Volume/Jumlah" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txthrgsatuan[]" id="txthrgsatuan" placeholder="Harga satuan" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txtjmlbiaya[]" id="txtjmlbiaya" placeholder="Jumlah biaya" required />
</div>

$('input[id^="txthrgsatuan"]').on('change', function() {
    $('input[id^="txthrgsatuan"]').each(function() {
        $(this).parent().next().children().val($(this).val()*$(this).parent().prev().children().val());
    });
});

我想将txthrgsatuan与txtvolume相乘，并将最终结果显示在txtjmlbiaya事件触发器更改txthrgsatuan中。但是，当我添加具有相同name和id的其他输入时，会出现问题。有关详细信息，请参见下图。

source code

Answer 1

$(document).on("input", 'input[id^="txthrgsatuan"]', function () {
    $('[name="txthrgsatuan[]"]').each(function () {
        var intMultiplication = parseInt($(this).val()) * parseInt($(this).parent().prev().children().val());
        if (!isNaN(intMultiplication))
        {
            $(this).parent().next().children().val(intMultiplication);
        }
    });
});

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <div class="margin-bottom-sm col-sm-2">
            <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail" placeholder="Nama detail akun" required />
        </div>
        <div class="margin-bottom-sm col-sm-2">
            <input type="number" class="form-control input-number" name="txtvolume[]" id="txtvolume" placeholder="Volume/Jumlah" required />
        </div>
        <div class="margin-bottom-sm col-sm-2">
            <input type="number" class="form-control input-number" name="txthrgsatuan[]" id="txthrgsatuan" placeholder="Harga satuan" required />
        </div>
        <div class="margin-bottom-sm col-sm-2">
            <input type="number" class="form-control input-number" name="txtjmlbiaya[]" id="txtjmlbiaya" placeholder="Jumlah biaya" required />
        </div>
    </body>
</html>

此代码也适用于动态输入。如果您将使用此代码，则无需创建元素的动态id属性。

Answer 2

您可以先在输入中添加类而不是ID。然后你得到父元素，然后使用＆＃39; find（）＆＃39;然后将这两个值相乘：

$('.txtvolume, .txthrgsatuan').keyup( function(){
  var value_1 = $(this).val();
  var value_2 = $(this).parent().parent().find($(this).hasClass('txthrgsatuan') ?  '.txtvolume': '.txthrgsatuan').val();

  $(this).parent().parent().find('.txtjmlbiaya').val(value_1 * value_2);

});

HTML：

<div class="row">

    <div class="margin-bottom-sm col-sm-2">
        <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail" placeholder="Nama detail akun" required />
    </div>
    <div class="margin-bottom-sm col-sm-2">
        <input type="text" class="form-control input-number txtvolume" name="txtvolume[]" placeholder="Volume/Jumlah" required />
    </div>
    <div class="margin-bottom-sm col-sm-2">
        <input type="text" class="form-control input-number txthrgsatuan" name="txthrgsatuan[]" placeholder="Harga satuan" required />
    </div>
    <div class="margin-bottom-sm col-sm-2">
        <input type="text" class="form-control input-number txtjmlbiaya" name="txtjmlbiaya[]" placeholder="Jumlah biaya" required />
    </div>

</div>

DEMO

Answer 3

首先将重复的ID更改为类。然后在所需的输入字段上设置input事件，获取值并相应地设置它们。

这是一个有效的演示。

$(function() {

  $(document).on("input", ".txthrgsatuan", function() {
    var val = $(this).val();
    var otherVal = $(this).parent().prev().children().val();
    $(this).parent().next().children().val(val * otherVal);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="margin-bottom-sm col-sm-2">
  <input type="text" class="form-control txtketdetail" name="txtketdetail[]" placeholder="Nama detail akun" required />
</div>
<div class="margin-bottom-sm col-sm-2">
  <input type="text" class="form-control input-number txtvolume" name="txtvolume[]" placeholder="Volume/Jumlah" required />
</div>
<div class="margin-bottom-sm col-sm-2">
  <input type="text" class="form-control input-number txthrgsatuan" name="txthrgsatuan[]" placeholder="Harga satuan" required />
</div>
<div class="margin-bottom-sm col-sm-2">
  <input type="text" class="form-control input-number txtjmlbiaya" name="txtjmlbiaya[]" placeholder="Jumlah biaya" required />
</div>

Answer 4

检查此演示，但在这种情况下更改您的ID，即ID分配了编号，即。 block 1包含idname2，block 2包含idname2，依此类推......这也适用于多个块。

$('[id^="txtvolume"]').on('change keyup', function(){
	var thisVal = isNaN($(this).val())? 0 : parseInt($(this).val());
    var $next = $(this).parent().next('div');
    var nextVal = isNaN($next.find('input').val())? 0 : parseInt($next.find('input').val());
    var $total = $next.next('div');
	var prod = isNaN(thisVal * nextVal)?0:thisVal * nextVal;
    $total.find('input').val(prod);
});


$('[id^="txthrgsatuan"]').on('change keyup', function(){
	var thisVal = isNaN($(this).val())? 0 : parseInt($(this).val());
    var $prev = $(this).parent().prev('div');
    var prevVal = isNaN($prev.find('input').val())? 0 : parseInt($prev.find('input').val());
    var $total = $(this).parent().next('div');
	var prod = isNaN(thisVal * prevVal)?0:thisVal * prevVal;
    $total.find('input').val(prod);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail1" placeholder="Nama detail akun" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txtvolume[]" id="txtvolume1" placeholder="Volume/Jumlah" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txthrgsatuan[]" id="txthrgsatuan1" placeholder="Harga satuan" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txtjmlbiaya[]" id="txtjmlbiaya1" placeholder="Jumlah biaya" required />
</div>
<br/><br/>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail2" placeholder="Nama detail akun" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txtvolume[]" id="txtvolume2" placeholder="Volume/Jumlah" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txthrgsatuan[]" id="txthrgsatuan2" placeholder="Harga satuan" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txtjmlbiaya[]" id="txtjmlbiaya2" placeholder="Jumlah biaya" required />
</div>
<br/><br/>

<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail3" placeholder="Nama detail akun" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txtvolume[]" id="txtvolume3" placeholder="Volume/Jumlah" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txthrgsatuan[]" id="txthrgsatuan3" placeholder="Harga satuan" required />
</div>
<div class="margin-bottom-sm col-sm-2">
    <input type="text" class="form-control input-number" name="txtjmlbiaya[]" id="txtjmlbiaya3" placeholder="Jumlah biaya" required />
</div>

将值从文本框设置为另一个文本框

4 个答案: