Когда флажок установлен, умножьте значение текстового поля на 0,9

Question

У меня есть текстовое поле без возможности нажатия, которое я использую для сохранения промежуточного итога (каждый раз, когда отмечается флажок, его значение добавляется в текстовое поле).

Однако я борюсь с некоторым умножением на это значение текстового поля. У меня есть флажок, который при выборе я бы хотел умножить на 0,9 (для имитации 10% скидки). Как мне go сделать это?

Вот что у меня есть (но не работает - значение текстового поля просто равно 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 кажется немного смущенным. Вы подключаете только один обработчик событий и пытаетесь l oop поверх несвязанного селектора, который содержит только один элемент. Вы также умножаете значение, но не назначаете результат чему-либо.

Чтобы сделать это, вам нужно прикрепить обработчик событий к всем переключателям. Затем вы можете использовать свойство value всех рад ios, чтобы удерживать число, умноженное на #sum, чтобы получить дисконтированную сумму.

Также обратите внимание, что вам нужно где-то хранить исходную сумму ie. значение до применяет любую скидку, так что расчет всегда работает с базовой цифры. Для этого вы можете использовать атрибут 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, так как есть некоторые фундаментальные принципы, которые вам нужны, чтобы получить фирму gr asp из. Это руководство MDN - отличный стартер.

Answer 2

Вы должны использовать их имя вместо их идентификатора. Ваш код должен быть таким:

$(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>