javascript - 选中复选框时，文本框值不会相乘(HTML 和 Javascript/JQuery)

Question

当选择选项时，我的代码会更新每次点击费用文本框，但当选择代理机构折扣(即 10% 复选框)时，它会成功地将每次点击费用文本框值降低 10%，但不会对总成本文本框执行相同的操作.

总费用文本框值应为(每次点击费用文本框值 * 点击次数文本框)* 百分比折扣乘数

有人能看出我哪里出错了吗？如果我没有很好地解释这一点，我很乐意进一步澄清!

HTML:

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

<div class="black_whitelisting">
    <h1>4. Blacklist/Whitelist?</h1>
    <input type="checkbox" class="blacklist" name="blacklist" value="0.20" id="blacklist_checkbox" onclick="BlacklistFunction()">Blacklist required<br>
    <input type="checkbox" class="whitelist" name="whitelist" value="0.30" id="whitelist_checkbox">Whitelist required<br>
</div>

<div class="selecttier">
    <h1>5. Number of Clicks</h1>
    <input id="numberofclickstextbox" type="text" value="0.00" data-total="0" oninput="calculatetier()" />
</div>

<div class="agencydiscount">
  <h1>6. 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" onclick="calculatetotalcost10()" >
    10% Discount
  </label>
  <label>
    <input type="radio" name="percentdiscount" id="15percent" value="0.85" onclick="calculatetier15()" >
    15% Discount
  </label>
</div>

Javascript:

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);
    });
  }
});

//to work out total cost    
function calculatetier() {
        var myBox5 = document.getElementById('numberofclickstextbox').value;    
        var myBox6 = document.getElementById('sum').value;
        var result = document.getElementById('totalcost');  
        var myResult = myBox5 * myBox6;
        result.value = myResult.toFixed(2);
    }

Answer 1

看起来您在更改折扣期间没有调用calculatetier函数。

工作演示:https://codepen.io/punith/pen/gOpaVxr?editors=1010

HTML 代码

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

<div class="black_whitelisting">
    <h1>4. Blacklist/Whitelist?</h1>
    <input type="checkbox" class="blacklist" name="blacklist" value="0.20" id="blacklist_checkbox" >Blacklist required<br>
    <input type="checkbox" class="whitelist" name="whitelist" value="0.30" id="whitelist_checkbox">Whitelist required<br>
</div>


<div class="selecttier">
    <h1>5. Number of Clicks</h1>
    <input id="numberofclickstextbox" type="text" value="0.00" data-total="0" oninput="calculatetier()" />
</div>

<div class="agencydiscount">
  <h1>6. 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代码

function calculatetier() {
        var myBox5 = document.getElementById('numberofclickstextbox').value;    
        var myBox6 = document.getElementById('sum').value;
        var result = document.getElementById('totalcost');      
  if(myBox6=="0.00"){
          myBox6 =1;
        }
console.log(myBox6)
        var myResult = myBox5 * myBox6;
        result.value = myResult.toFixed(2);
    }
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();
  });
//to work out total cost    

  function applyDiscount() {
    var pc = parseFloat($('input[name="percentdiscount"]:checked').val());
    $('#sum').val(function() {
      return ($(this).data('total') * pc).toFixed(2);
    });
    calculatetier()
  }
});