时间戳

首页 > 解决方案 > 选中复选框时，将文本框值乘以 0.9

javascript - 选中复选框时，将文本框值乘以 0.9

问题描述

我有一个不可点击的文本框，我用它来保持运行总数（每次单击复选框，它的值都被添加到文本框中）。

然而，我正在努力对这个文本框值做一些乘法。I have a checkbox that, when selected, I would like to multiply by 0.9 (to simulate a 10% discount). 我该怎么做呢？

这是我到目前为止所拥有的（但不工作 - 文本框值刚刚变为 0.00）：

$(document).ready(function($) {
      var sum = 0;
      $('input[id=10percent]').click(function() {
        sum = 0;
        $('input[id=15percent]:checked').each(function() {
        debugger;
          var val = parseFloat($(this).val());
          sum * 0.9;
        });
        $('#sum').val(sum.toFixed(2));
      });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="runningtotal">
Running CPC Total (in £): <input id='sum' type='text' readonly />
</div>
HTML (for radio boxes):

<div class="agencydiscount">
    <h1>Agency Discount</h1>
    <input type="radio" name="percentdiscount" value="0.00">None<br>
    <input type="radio" name="percentdiscount" id="10percent" value="0.00">10% Discount<br>
    <input type="radio" name="percentdiscount" id="15percent" value="0.00">15% Discount<br>
</div>
jQuery:

jQuery 更新运行总文本框：

jQuery(document).ready(function($) {
      var sum = 0;
      $('input[type=checkbox]').click(function() {
        sum = 0;
        $('input[type=checkbox]:checked').each(function() {
        debugger;
          var val = parseFloat($(this).val());
          sum += val;
        });
        $('#sum').val(sum.toFixed(2));
      });
    });

标签： javascriptjqueryhtml

解决方案

你的 JS 似乎有点困惑。您只附加了一个事件处理程序，并试图循环一个不相关的选择器，它只包含一个元素。您还乘以该值，但没有将结果分配给任何东西。

要完成这项工作，您需要将事件处理程序附加到所有单选按钮。然后您可以使用value所有收音机的属性来保存要乘以的数字#sum以获得折扣总数。

另请注意，您需要在某个地方存储原始总数，即。应用任何折扣之前的值，因此计算始终从基数开始。data您可以为此使用属性，但请注意，您必须与值一起更新此属性。

说了这么多，试试这个：

jQuery(function($) {
  $('input[name="percentdiscount"]').on('change', function() {
    applyDiscount();
  });

  $('input[type=checkbox]').click(function() {
    let sum = 0;        
    $('input[type=checkbox]:checked').each(function() {
      sum += parseFloat($(this).val());
    });
    $('#sum').val(sum.toFixed(2)).data('total', sum);
    applyDiscount();
  });
  
  function applyDiscount() {
    var pc = parseFloat($('input[name="percentdiscount"]:checked').val());
    $('#sum').val(function() {
      return ($(this).data('total') * pc).toFixed(2);
    });
  }
});
label {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>
  <input type="checkbox" value="10.00">
  £10.00
</label>
<label>
  <input type="checkbox" value="5.00">
  £5.00
</label>
<label>
  <input type="checkbox" value="19.99">
  £19.99
</label>

<div class="runningtotal">
  Running CPC Total (in £): <input id="sum" type="text" readonly="true" value="0.00" data-total="0" />
</div>

<div class="agencydiscount">
  <h1>Agency Discount</h1>
  <label>
    <input type="radio" name="percentdiscount" value="1" checked>
    None
  </label>
  <label>
    <input type="radio" name="percentdiscount" id="10percent" value="0.9">
    10% Discount
  </label>
  <label>
    <input type="radio" name="percentdiscount" id="15percent" value="0.85">
    15% Discount
  </label>
</div>

顺便说一句，我建议研究 JS 的基础知识，因为您需要牢牢掌握一些基本原则。这个MDN 指南是一个很好的入门。

推荐阅读