選中復選框時，將文本框值乘以 0.9

Question

我有一個不可點擊的文本框，我用它來保持運行總數（每次點擊復選框時，它的值都會被添加到文本框中）。

然而，我正在努力對這個文本框值進行一些乘法運算。 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));
      });
    });

Answer 1

你的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 指南是一個很好的入門。

Answer 2

您必須使用他們的名字而不是他們的 id。 所以你的代碼一定是這樣的：

 $(document).ready(function($) { $('input[type=radio]').on('change', function() { var sum = $('input[name=percentdiscount]:checked').attr('value') * 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> <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="10.00">10% Discount<br> <input type="radio" name="percentdiscount" id="15percent" value="20.00">15% Discount<br> </div>