如何用jQuery的onchange同步对应多组ot_jam与ot_uang输入框值

我动态生成多组输入框，每组包含name="ot_jam[number]"（绑定onchange事件调用otNormal函数）和name="ot_uang[number]"的输入框。期望修改某组ot_jam的值时，同步更新同组的ot_uang值，但目前修改时只会更新最后一个ot_uang输入框。

原代码 #

HTML代码 #

<div class="col-6 text-right mb-2">
 <button type="button" class="btn btn-success ti-plus" id="BarisBaru"></button>
</div>

<div class="form-group" id="tableLoop"></div>

JS代码 #

$(document).ready(function() {
    for (baris = 1; baris <= 1; baris++) {
        Barisbaru();
    }
    $('#BarisBaru').click(function(e) {
        e.preventDefault();
        Barisbaru();
    });
});

function otNormal(value) {
    let a = 1.5 * (value / 173) * 3000000;
    const b = Math.round(a);
    const currency = b.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
    var number = $("#tableLoop .row .num").length;
    $('[name="ot_uang[' + number + ']"]').val(currency);
}

function Barisbaru() {
    $(document).ready(function() {
        $("[data-toggle='tooltip']").tooltip();
    });
    var number = $("#tableLoop .row .num").length + 1;
    var Baris = '<div class="row mb-2">';
    Baris += '<div class="num col-6 col-xl-2 my-auto">';
    Baris += '<span>OT.<span class="count_slip"></span></span>';
    Baris += '</div>';
    Baris += '<div class="col-6 col-xl-3">';
    Baris += '<input class="form-control" type="number" name="ot_jam[' + number + ']" value="0.0" onchange="otNormal(this.value)">';
    Baris += '</div>';
    Baris += '<div class="col-6 col-xl-3 my-auto">';
    Baris += '<span>Jam => Rp.</span>';
    Baris += '</div>';
    Baris += '<div class="col-6 col-xl-3">';
    Baris += '<input class="form-control" type="text" name="ot_uang[' + number + ']" value="0" readonly>';
    Baris += '</div>';
    Baris += '<button class="btn btn-sm btn-danger ti-close" data-toggle="tooltip" id="HapusBaris"></button>';

    $("#tableLoop").append(Baris);
}

问题原因 #

• otNormal函数仅接收输入值，无法定位触发事件的输入框所属分组
• 函数中通过$("#tableLoop .row .num").length获取的是总组数，而非当前修改的输入框对应的分组编号，导致每次都选中最后一组的ot_uang

解决方案 #

1. 修改事件传递参数 #

在Barisbaru函数生成输入框的代码中，把onchange="otNormal(this.value)"改为onchange="otNormal(this)"，传递当前输入元素而非仅值：

Baris += '<input class="form-control" type="number" name="ot_jam[' + number + ']" value="0.0" onchange="otNormal(this)">';

2. 重写otNormal函数 #

通过当前元素精准定位同组的ot_uang输入框：

function otNormal(inputElement) {
    const value = parseFloat(inputElement.value);
    let a = 1.5 * (value / 173) * 3000000;
    const b = Math.round(a);
    const currency = b.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
    
    // 找到当前输入框所在的row容器，再定位同组的ot_uang
    const $row = $(inputElement).closest('.row');
    $row.find('[name^="ot_uang["]').val(currency);

    // 可选：处理值为0的情况
    // if (value === 0) {
    //     $row.find('[name^="ot_uang["]').val("kosong");
    // } else {
    //     $row.find('[name^="ot_uang["]').val(currency);
    // }
}

3. 修复删除按钮事件（额外优化） #

原代码删除按钮使用重复id，会导致只有第一个按钮生效，改为类名并通过事件委托绑定：

修改删除按钮代码

Baris += '<button class="btn btn-sm btn-danger ti-close" data-toggle="tooltip"></button>';

在$(document).ready中添加事件委托

$('#tableLoop').on('click', '.btn-danger', function(e) {
    e.preventDefault();
    $(this).closest('.row').remove();
});

内容的提问来源于stack exchange，提问作者user17069484