计算用Javascript选择的行

我想在用PHP创建的页面上计算选定产品的价格 我做了一些事,但是效果不佳 全选并取消选择一些或手动选择

Calculating values in the selected row

$(".satir").click(function() {
  var code = $(this).data("code");
  var total = 0;
  var vat = 0;
  var all_total = 0;
  if ($(this).is(':checked')) {
    var count = $(this).data("count");
    var price = $(this).data("price");
    var discount = $(this).data("discount");
    var carp = count * price;
    var discount_rate = carp * discount / 100;
    var discounted = carp - discount_rate;
    total += parseFloat(discounted);
    vat = (total * 0.18);
    all_total = (vat + total);
  } else {
    var discounted = 0;
  }
  document.getElementById("" + code + "").innerHTML = discounted.toFixed(2) + " USD";
  document.getElementById("total").innerHTML = total.toFixed(2) + " USD";
  document.getElementById("vat").innerHTML = vat.toFixed(2) + " USD";
  document.getElementById("all_total").innerHTML = all_total.toFixed(2) + " USD";
});
//////////////////////////////////////////////////////////////
function toggle(source) {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var total = 0;
  var vat = 0;
  var all_total = 0;
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i] != source)
      checkboxes[i].checked = source.checked;

    var code = $(checkboxes[i]).data("code");
    if ($(checkboxes[i]).is(':checked')) {
      var count = $(checkboxes[i]).data("count");
      var price = $(checkboxes[i]).data("price");
      var discount = $(checkboxes[i]).data("discount");
      var carp = count * price;
      var discount_rate = carp * discount / 100;
      var discounted = carp - discount_rate;
      total += parseFloat(discounted);
      vat = (total * 0.18);
      all_total = (vat + total);
    } else {
      var discounted = 0;
    }
    document.getElementById("" + code + "").innerHTML = discounted.toFixed(2) + " USD";
    document.getElementById("total").innerHTML = total.toFixed(2) + " USD";
    document.getElementById("vat").innerHTML = vat.toFixed(2) + " USD";
    document.getElementById("all_total").innerHTML = all_total.toFixed(2) + " USD";


  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="100%">
  <tr valign="top" align="center">
    <td class="thead">SELECT</td>
    <td class="thead">PRODUCT CODE</td>
    <td class="thead">BRAND</td>
    <td class="thead">PRODUCT NAME</td>
    <td class="thead">AMOUNT</td>
    <td class="thead">UNIT PRICE</td>
    <td class="thead">DISCOUNT %</td>
    <td class="thead">TOTAL MONEY</td>
  </tr>

  <tbody id="tbody_bbactive">
    <tr valign="top">
      <td class="alt1">
        <div class="smallfont"><input type="checkbox" class="satir" data-code="46546" data-count="2" data-price="20.00" data-discount="12" name="purchaseorders[]" value='{"lnb_id":"2","lnb_amount":3}'></div>
      </td>
      <td class="alt1">
        <div class="smallfont">46546</div>
      </td>
      <td class="alt1">
        <div class="smallfont">TEKNİKSAT</div>
      </td>
      <td class="alt1">
        <div class="smallfont">QUATTRO SİSTEM LNB</div>
      </td>
      <td class="alt1">
        <div class="smallfont" style="text-align: right;">2</div>
      </td>
      <td class="alt1">
        <div class="smallfont" style="text-align: right;">20,00 USD</div>
      </td>
      <td class="alt1">
        <div class="smallfont" style="text-align: right;">12</div>
      </td>
      <td class="alt1">
        <div class="smallfont" style="text-align: right;" id="46546">0,00 USD</div>
      </td>
    </tr>
  </tbody>

  <tbody id="tbody_bbactive">
    <tr valign="top">
      <td class="alt1">
        <div class="smallfont"><input type="checkbox" class="satir" data-code="31256" data-count="1" data-price="160.00" data-discount="12" name="purchaseorders[]" value='{"multiswitch_id":"125","multiswitch_amount":"1"}'></div>
      </td>
      <td class="alt1">
        <div class="smallfont">31256</div>
      </td>
      <td class="alt1">
        <div class="smallfont">SUNNY</div>
      </td>
      <td class="alt1">
        <div class="smallfont">10X24 KASKAD MULTISWITCH</div>
      </td>
      <td class="alt1">
        <div class="smallfont" style="text-align: right;">1</div>
      </td>
      <td class="alt1">
        <div class="smallfont" style="text-align: right;">160,00 USD</div>
      </td>
      <td class="alt1">
        <div class="smallfont" style="text-align: right;">12</div>
      </td>
      <td class="alt1">
        <div class="smallfont" style="text-align: right;" id="31256">0,00 USD</div>
      </td>
    </tr>
  </tbody>

  <tr>
    <td class="alt1" style="text-align: left;">
      <div class="smallfont"><input type="checkbox" onclick="toggle(this);" /> </div>
    </td>
    <td class="alt1" style="text-align: left;">
      <div class="smallfont"> <b>ALL SELECT</b></div>
    </td>
    <td class="alt1" colspan="4" style="text-align: right;">
      <div class="smallfont"><b>TOTAL PRODUCT MONEY: </b></div>
    </td>
    <td class="alt1" colspan="2" style="text-align: right;">
      <div class="smallfont" id="total">0,00 USD</div>
    </td>
  </tr>

  <tr>
    <td class="alt1" colspan="4" style="text-align: left;">
      <div class="smallfont">&nbsp;</div>
    </td>
    <td class="alt1" style="text-align: right;" colspan="2">
      <div class="smallfont"><b>V.A.T:</b></div>
    </td>
    <td class="alt1" style="text-align: right;">
      <div class="smallfont">18 %</div>
    </td>
    <td class="alt1" style="text-align: right;">
      <div class="smallfont" id="vat">0,00 USD</div>
    </td>
  </tr>

  <tr>
    <td class="alt1" style="color: red; font-size:16px;text-align: right;" colspan="6">
      <div class="smallfont"><b>ALL TOTAL MONEY:</b></div>
    </td>
    <td class="alt1" style="color: red; font-size:16px;text-align: right;" colspan="2">
      <div class="smallfont" style="font-weight: bold;" id="all_total"><b>0,00 USD</b></div>
    </td>
  </tr>
</table>
评论