键值的总和字段javascript ajax codeigniter

Question

如果选中 = true，我想计算字段 id="HargaPart"。这是我的视图代码：<div class="modal fade" id="tambah" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>                <h3 class="modal-title" id="myModalLabel">Tambah Pemeliharaan</h3>            </div>            <form id="frmSparepart" class="form-horizontal" method="post" action="<?php echo base_url()?>Data/Pemeliharaan/Tambah">                <div class="modal-body">                    <div class="form-group">                    <label class="control-label col-xs-3">Nama Kendaraan</label>                        <div class="col-xs-8">                            <select class="form-control"  name="id_kendaraan" id="id_kendaraan" required>                            <option>Pilih Kendaraan</option>                            <?php                            if(!empty($kendaraan_)) {                            foreach ($kendaraan_ as $isi) {                            ?>                            <option value="<?php echo $isi['id_kendaraan']?>"><?php echo $isi['nama']?> - <?php echo $isi['platno']?></option>                            <?php }} ?>                            </select>                        </div>                    </div>                            

Answer 1

您可以使用each循环遍历选中的复选框的值，然后获取HargaSparepartusing的值，.next()因为在您的 html 中它位于checkbox.

演示代码 ：

function onChangeCheckbox() {

  var rTotal = 0;

  var sum = 0;

//loop through ul->checkboxes 

  $('#sparepartList input[type="checkbox"]:checked').each(function() {

  //get next input  HargaSparepart

    var harga = $(this).next('input[name=HargaSparepart]').val()

    rTotal += 1; // add 1

    sum += parseInt(harga); //add to sum

  })

//add values to inputs

  $('#counterSparepart').val(rTotal);

  $('#totalBiaya').val(sum);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group">

  <label class="control-label col-xs-3">Biaya Total</label>

  <div class="col-xs-8">

    <input id="totalBiaya" name="biaya" value="" class="form-control" type="number" required>

  </div>

</div>

<div class="form-group">

  <label class="control-label col-xs-3"></label>

  <div class="col-xs-8">

    <ul id="sparepartList" style="list-style-type: none; padding: 0;">

      <li><input onchange="onChangeCheckbox()" type="checkbox" name="id_sparepart[]" value="' + value.id_sparepart + '">Something Rp. <input id="HargaPart" name="HargaSparepart" value="500" class="form-group" type="text" readonly></li>

      <li><input onchange="onChangeCheckbox()" type="checkbox" name="id_sparepart[]" value="' + value.id_sparepart + '">&nbsp; Something1 Rp. <input id="HargaPart" name="HargaSparepart" value="100" class="form-group" type="text" readonly></li>

      <li><input onchange="onChangeCheckbox()" type="checkbox" name="id_sparepart[]" value="' + value.id_sparepart + '">&nbsp;Something2 Rp. <input id="HargaPart" name="HargaSparepart" value="200" class="form-group" type="text" readonly></li>

    </ul>

  TotalBiaya : 

    <input type="text" id="counterSparepart">

  </div>

</div>

Answer 2

试试这个代码

$('#HargaPart').change(function (){

  var total = 0;

  $('#HargaPart:checked').each(function(){ // iterate through each checked element.

    total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());

  });     

  $("#total").val(total); 

});