[英]How can I calculate selected checkbox foreach only
我只需要在表格字段中計算選中的復選框(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;
}
}
您只能在頁面中使用一次 id,id = 標識符,因此您可以使用 object id 來確保它是唯一的,並將其傳遞給sum
function
例如
@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>
希望這可以幫助
由於您有多行要 foreach,因此您不能依賴唯一的 ID。 一個(不優雅?)解決方案可能是為每一行定義動態不同的 id 並將該 id 傳遞給您的sum
方法。
另一種解決方案是使用更通用的方法,將sum
方法綁定到每一行,並將父 scope 傳遞給它,只使用現有的 id,如下所示:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.