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

Question

我有一个不可点击的文本框，用于保存运行总计(每次单击复选框时，它的值都会添加到文本框中)。

但是，我正在努力对此文本框值进行一些乘法。我有一个复选框，选中该复选框后，我想乘以 0.9(以模拟 10% 的折扣)。我该如何去做呢？

这是我到目前为止所拥有的(但不起作用 - 文本框值只是变为 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));
      });
    });

Answer 1

你的 JS 看起来有点困惑。您仅附加一个事件处理程序，并尝试循环遍历仅包含单个元素的不相关选择器。您还乘以该值，但不将结果分配给任何内容。

要实现此功能，您需要将事件处理程序附加到所有单选按钮。然后，您可以使用所有 radio 的 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 guide是一个很好的入门者。