Как я могу рассчитать только выбранный флажок foreach

Question

Мне нужно вычислить выбранный флажок только для этого foreach в поле таблицы (harga_obat * jumlah)

Это мои данные foreach

@foreach ($obat as $o)
<tr>
    <td>
        <input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
    </td>
    <td>
        <input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
    </td>
    <td>
        <input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
    </td>
    <td>
        <input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}"
            onkeyup="sum()">
    </td>
    <td>
        <input id="jumlah" type="text" class="form-control" name="jumlah" onkeyup="sum()">
    </td>
    <td>
        <input id="total" type="text" class="form-control total-harga" name="total_harga" onkeyup="sum()" readonly>
    </td>
</tr>
@endforeach

Это то, что я пробовал, этопросто работает на один ряд, как на картинке ниже

function sum() {
    var harga = document.getElementById('harga').value;
    var jumlah = document.getElementById('jumlah').value;
    var hasil = parseInt(harga) * parseInt(jumlah);
    if (!isNaN(hasil)) {
        document.getElementById('total').value = hasil;
    }
}

Answer 1

Так как у вас есть несколько строк для foreach, вы не можете полагаться на уникальные идентификаторы. Одно (не элегантное?) Решение может состоять в том, чтобы определять динамические разные идентификаторы для каждой строки и передавать этот идентификатор в ваш метод sum.

Другое решение будет заключаться в использовании более общего подхода, связывающего метод sumдля каждой строки и передачи ей родительской области, работающей только с существующими идентификаторами, как показано ниже:

function sum(parent) {
    var harga = parent.querySelector('[name="harga_obat"]').value;
    var jumlah = parent.querySelector('[name="jumlah"]').value;
    var hasil = parseInt(harga) * parseInt(jumlah);
    
    if (!isNaN(hasil)) {
        parent.querySelector('[name="total_harga"]').value = hasil;
    }
}

function bind(el) {
  el.addEventListener('keyup', function (event) {
    sum(event.currentTarget.closest("tr"));
  });
}

document.querySelectorAll('[name="harga_obat"]').forEach(function (element) {
  bind(element);
});
document.querySelectorAll('[name="jumlah"]').forEach(function (element) {
  bind(element);
});

<table>
<tr>
    <td>
        <input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
    </td>
    <td>
        <input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
    </td>
    <td>
        <input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
    </td>
    <td>
        <input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}">
    </td>
    <td>
        <input id="jumlah" type="text" class="form-control" name="jumlah">
    </td>
    <td>
        <input id="total" type="text" class="form-control total-harga" name="total_harga" readonly>
    </td>
</tr>
<tr>
    <td>
        <input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
    </td>
    <td>
        <input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
    </td>
    <td>
        <input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
    </td>
    <td>
        <input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}">
    </td>
    <td>
        <input id="jumlah" type="text" class="form-control" name="jumlah">
    </td>
    <td>
        <input id="total" type="text" class="form-control total-harga" name="total_harga" readonly>
    </td>
</tr>
</table>

Answer 2

Вы можете использовать идентификатор только один раз на странице, id = идентификатор, так что вы можете использовать идентификатор объекта, чтобы убедиться, что он уникален, и передать его функции sum

Например

@foreach ($obat as $o)
<tr>
    <td>
        <input id="check" type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
    </td>
    <td>
        <input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
    </td>
    <td>
        <input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
    </td>
    <td>
        <input id="harga-{{ $o->id }}" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}"
            onkeyup="sum({{ $o->id }})">
    </td>
    <td>
        <input id="jumlah-{{ $o->id }}" type="text" class="form-control" name="jumlah" onkeyup="sum({{ $o->id }})">
    </td>
    <td>
        <input id="total-{{ $o->id }}" type="text" class="form-control total-harga" name="total_harga"
            onkeyup="sum({{ $o->id }})" readonly>
    </td>
</tr>
@endforeach


<script>
    function sum(id) {
        var harga = document.getElementById('harga-' + id).value;
        var jumlah = document.getElementById('jumlah-' + id).value;
        var hasil = parseInt(harga) * parseInt(jumlah);
        if (!isNaN(hasil)) {
        document.getElementById('total-' + id).value = hasil;
        }
    }
</script>

Надеюсь, это поможет