javascript 选中复选框并选择正确的行

我想创建退货发票。我把sql中的数据插入到html/php中的表中。我想选择两个产品（例如第3行和第5行），js只对这些产品进行正确的计算。此时，如果我选择第3行和第5行，js将计算前两个产品。事实上，它占用了我的第一轮，并添加了下一轮。如何解决这一问题？

$(document).ready(function() {
  $(document).on('click', '#checkAll', function() {
    $(".checkbox").prop("checked", this.checked);
  });

  $(document).on('change', function stornSelectedProducts() {
    var checkboxes = document.querySelectorAll('.checkbox');
    var count = 0;

    checkboxes.forEach(function(checkbox) {
      if (checkbox.checked) {
        count++;
        $('#total_item').val(count);
      }
    });
    cal_final_total(count);
  });
  update();

  function cal_final_total(count) {
    var final_item_total = 0;
    var final_total_vat = 0;
    var total_items_vat_0 = 0;

    for (j = 1; j <= count; j++) {
      var quantity = 0;
      var price = 0;
      var actual_amount = 0;
      var tax1_rate = 0;
      var tax1_amount = 0;
      var item_total = 0;
      quantity = $('#order_item_quantity' + j).val();
      if (quantity > 0) {
        price = $('#order_item_price' + j).val();
        if (price > 0) {
          actual_amount = parseFloat(quantity) * parseFloat(price);
          $('#order_item_actual_amount' + j).val(actual_amount);
          tax1_rate = $('#order_item_tax1_rate' + j).val();
          if (tax1_rate > 0) {
            tax1_amount = parseFloat(actual_amount) * parseFloat(tax1_rate) / 100;
            $('#order_item_tax1_amount' + j).val(tax1_amount);
          }

          total_vat_0 = parseFloat(actual_amount);
          total_items_vat_0 = parseFloat(total_items_vat_0) + parseFloat(total_vat_0);
          $('#order_item_actual_amount' + j).val(total_vat_0);

          total_vat = parseFloat(tax1_amount);
          final_total_vat = parseFloat(final_total_vat) + parseFloat(total_vat);
          $('#order_item_vat_amount' + j).val(total_vat);

          item_total = parseFloat(actual_amount) + parseFloat(tax1_amount);
          final_item_total = parseFloat(final_item_total) + parseFloat(item_total);
          $('#order_item_final_amount' + j).val(item_total);
        }
      }
    }
    $('#final_total_amt').text(final_item_total);
    $('#final_total_amt_val').val(final_item_total);
    $('#total_amt_vat_val').val(final_total_vat);
    $('#total_amt_vat_0_val').val(total_items_vat_0);
  }

  $(document).on('blur', '.order_item_quantity', function() {
    cal_final_total(count);
  });

  $(document).on('blur', '.order_item_price', function() {
    cal_final_total(count);
  });

  $(document).on('blur', '.order_item_tax1_rate', function() {
    cal_final_total(count);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container-fluid">
    <table id="invoicetable" class="table table-bordered">
      <tr>
        <th width="7%">Sr No.</th>
        <th width="20%">Item Name</th>
        <th width="5%">Quantity</th>
        <th width="5%">Price</th>
        <th width="10%">Tax1</th>
        <th width="10%">Actual Amt.</th>
        <th width="10%">Total TAX</th>
        <th width="10%">Total</th>
        <th width="1%"><input id="checkAll" type="checkbox" </th>
      </tr>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>

      </tr>
      <tr>
        <td><span id="sr_no">1</span></td>
        <td><input type="text" value="Description 1" id="item_name1" class="form-control input-sm" /></td>
        <td><input type="text" value="7" id="order_item_quantity1" data-srno="1" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="4" id="order_item_price1" data-srno="1" readonly class="form-control order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate1" data-srno="1" readonly class="form-control order_item_tax1_rate" /></td>
        <td><input type="text" value="28" id="order_item_actual_amount1" data-srno="1" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="5.88" id="order_item_tax1_amount1" data-srno="1" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="33.88" id="order_item_final_amount1" data-srno="1" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count1" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
      <tr>
        <td><span id="sr_no">2</span></td>
        <td><input type="text" value="Description 2" id="item_name2" class="form-control input-sm" /></td>
        <td><input type="text" value="12" id="order_item_quantity2" data-srno="2" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="6" id="order_item_price2" data-srno="2" readonly class="form-control input-sm number_only order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate2" data-srno="2" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
        <td><input type="text" value="72" id="order_item_actual_amount2" data-srno="2" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="15.12" id="order_item_tax1_amount2" data-srno="2" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="87.12" id="order_item_final_amount2" data-srno="2" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count2" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
      <tr>
        <td><span id="sr_no">3</span></td>
        <td><input type="text" value="Description 3" id="item_name3" class="form-control input-sm" /></td>
        <td><input type="text" value="2.5" id="order_item_quantity3" data-srno="3" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="14" id="order_item_price3" data-srno="3" readonly class="form-control input-sm number_only order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate3" data-srno="3" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
        <td><input type="text" value="35" id="order_item_actual_amount3" data-srno="3" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="7.35" id="order_item_tax1_amount3" data-srno="3" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="42.35" id="order_item_final_amount3" data-srno="3" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count3" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
      <tr>
        <td><span id="sr_no">4</span></td>
        <td><input type="text" value="Description 4" id="item_name4" class="form-control input-sm" /></td>
        <td><input type="text" value="2" id="order_item_quantity4" data-srno="4" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="8.87" id="order_item_price4" data-srno="4" readonly class="form-control input-sm number_only order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate4" data-srno="4" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
        <td><input type="text" value="17.74" id="order_item_actual_amount4" data-srno="4" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="3.72" id="order_item_tax1_amount4" data-srno="4" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="21.46" id="order_item_final_amount4" data-srno="4" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count4" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
      <tr>
        <td><span id="sr_no">5</span></td>
        <td><input type="text" value="Description 5" id="item_name5" class="form-control input-sm" /></td>
        <td><input type="text" value="9" id="order_item_quantity5" data-srno="5" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="7.87" id="order_item_price5" data-srno="5" readonly class="form-control input-sm number_only order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate5" data-srno="5" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
        <td><input type="text" value="70.83" id="order_item_actual_amount5" data-srno="5" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="14.87" id="order_item_tax1_amount5" data-srno="5" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="85.70" id="order_item_final_amount5" data-srno="5" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count5" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
      <tr>
        <td><span id="sr_no">6</span></td>
        <td><input type="text" value="Description 6" id="item_name6" class="form-control input-sm" /></td>
        <td><input type="text" value="7" id="order_item_quantity6" data-srno="6" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="7.54" id="order_item_price6" data-srno="6" readonly class="form-control input-sm number_only order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate6" data-srno="6" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
        <td><input type="text" value="52.78" id="order_item_actual_amount6" data-srno="6" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="11.08" id="order_item_tax1_amount6" data-srno="6" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="63.86" id="order_item_final_amount6" data-srno="6" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count6" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
    </table>

    <br>
    <br>

    <table class="table table-hover">
      <tr>
        <td width=50%><input type="text" class="form-control" value="Total without tax" readonly></td>
        <td width=50%><input type="text" value="0.00" class="form-control" value="0.00" id="total_amt_vat_0_val" readonly></td>
      </tr>
      <tr>
        <td width=50%><input type="text" class="form-control" value="Tax" readonly></td>
        <td width=50%><input type="text" value="0.00" class="form-control" value="0.00" id="total_amt_vat_val" readonly></td>
      </tr>
      <tr>
        <td width=50%><input type="text" class="form-control" value="Total with tax" readonly></td>
        <td width=50%><input type="text" class="form-control" value="0.00" id="final_total_amt_val" readonly></td>
      </tr>
      <tr>
      </tr>
    </table>
  </div>
</body>

</html>

$(function() { const update = () => { const $checked = $('.checkbox:checked'); $('#total_item').val($checked.length); let total_items_vat_0 = 0; let final_total_vat = 0; let item_total = 0; let final_item_total = 0; $checked.each(function() { const parent = $(this).closest('tr'); const quantity = $('.order_item_quantity', parent).val(); if (quantity > 0) { const price = $('.order_item_price', parent).val(); if (price > 0) { const actual_amount = parseFloat(quantity) * parseFloat(price); $('.order_item_actual_amount', parent).val(actual_amount); const tax1_rate = $('.order_item_tax1_rate', parent).val(); let tax1_amount = 0; if (tax1_rate > 0) { tax1_amount = actual_amount * tax1_rate / 100; $('.order_item_tax1_amount', parent).val(tax1_amount); } total_items_vat_0 += actual_amount; // missing a + $('.order_item_actual_amount', parent).val(total_items_vat_0); final_total_vat += tax1_amount; $('.order_item_vat_amount', parent).val(final_total_vat); item_total += actual_amount + tax1_amount; final_item_total += item_total; $('.order_item_final_amount', parent).val(item_total); } } }) $('#final_total_amt').text(final_item_total.toFixed(2)); $('#final_total_amt_val').val(final_item_total.toFixed(2)); $('#total_amt_vat_val').val(final_total_vat.toFixed(2)); $('#total_amt_vat_0_val').val(total_items_vat_0.toFixed(2)); }; $('#checkAll').on('click', function() { $(".checkbox").prop("checked", this.checked); update() }) $('invoicetable').on('change', update) $(document).on('blur', '.order_item_quantity', update); $(document).on('blur', '.order_item_price', update); $(document).on('blur', '.order_item_tax1_rate', update) });

javascript 选中复选框并选择正确的行

1条答案

相关问题

热门标签

最新问答