复选框不起作用选中以添加值

Question

我已经用javascripts创建了计算系统项目，所有的东西都是很好的计算，完美地完成了税收，但当我点击复选框时不包括税收，当我在输入字段中输入内容时添加，我希望在我点击复选框时改变值，甚至当我输入一些东西时

html

<div class="form-group row">
  <div class="col-sm-6">
    <input type="float" class="form-control form-control-user" id="BMS_qty" name="BMS_qty" placeholder="BMS Quantity">
    <input type="float" class="form-control form-control-user" id="BMS_price" name="BMS_price" placeholder="BMS Price">
  </div>
</div>

<div class="col-sm-6 form-check">
  <input type="checkbox" id="tax" name="taxamount" value="0.17">
  <label for="tax">Included Tax</label><br>

  <label for="total_expenses1" style="text-align: right;">Total:- </label>
  <span id="total_expenses1"></span>
</div>

javascript

$('input').keyup(function(){ // run anytime the value changes
  var BMS_qty  = Number($('#BMS_qty').val());
  var BMS_price = Number($('#BMS_price').val());
  if(document.getElementById("tax").checked) {
      var tax = 0.17;
  } else {
    tax = 0;
  }
  var subtotal = BMS_qty * BMS_price;
  var total = tax * subtotal;
  $('#total_expenses1').html(total + subtotal); // add them and output it
   // add them and output it
 }); 

Answer 1

问题是keyup()方法只会在按下空格键激活它时对<input type="checkbox">起作用。

为了避免这种问题，我建议切换代码以对input事件做出反应（这涵盖了<input>的值/状态发生更改的任何事件）。

下面是解决问题的一种方法，其中包括解释性评论：

 // we select all <input> elements regardless of their type attribute, // and bind the anonymous function of the on() method as the event-handler // for the 'input' event: $('input').on('input', function() { // switching to the use of const to declare variables that shouldn't // change after they've been defined, and we use parseInt() instead // of Number() to convert those the entered-values into numbers // supplying the radix (base) argument of 10 because we're working // with base-10 numbers (this is largely a personal preference, I // don't think there's a particular argument for, or against, this // change): const BMS_qty = parseInt($('#BMS_qty').val(), 10), BMS_price = parseFloat($('#BMS_price').val()), // here we use a conditional (ternary) operator, in which we // assess - using the .is() method - whether the element with // the id of "tax" is checked. // If it is checked the value of tax is 0.17, if it is not // the value is 0: tax = $('#tax').is(':checked') ? 0.17 : 0; // using let to declare variables that may need to change if // the calculations/results need to be modified in production: let subtotal = BMS_qty * BMS_price, total = tax * subtotal; // adding the values, andd writing it the element with an // id equal to "total_expenses", though I've switched to using // the text() method to avoid accidentally trying to insert any // HTML elements in the future: $('#total_expenses1').text(total + subtotal); });

 <div class="form-group row"> <div class="col-sm-6"> <input type="float" class="form-control form-control-user" id="BMS_qty" name="BMS_qty" placeholder="BMS Quantity"> <input type="float" class="form-control form-control-user" id="BMS_price" name="BMS_price" placeholder="BMS Price"> </div> </div> <div class="col-sm-6 form-check"> <input type="checkbox" id="tax" name="taxamount" value="0.17"> <label for="tax">Included Tax</label><br> <label for="total_expenses1" style="text-align: right;">Total:- </label> <span id="total_expenses1"></span> </div>

JS 小提琴演示。

参考：

JavaScript：

• 条件（“三元”）运算符。
• parseFloat() 。
• parseInt() 。
• jQuery：
  • is() 。
  • on() 。
  • text() 。

Answer 2

你需要使用on()来获取你需要的事件

我认为，您还需要通过 parseInt() 更改 Number()

 $(document).on('keyup keypress keydown change', 'input[name="BMS_qty"], input[name="BMS_price"], input[name="taxamount"]', function(){ // or keypress I have the same result var BMS_qty = parseInt($('#BMS_qty').val()); var BMS_price = parseInt($('#BMS_price').val()); if(document.getElementById("tax").checked) { var tax = 0.17; } else { tax = 0; } var subtotal = BMS_qty * BMS_price; var total = tax * subtotal; $('#total_expenses1').html(total + subtotal); // add them and output it });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group row"> <div class="col-sm-6"> <input type="float" class="form-control form-control-user" id="BMS_qty" name="BMS_qty" placeholder="BMS Quantity"> <input type="float" class="form-control form-control-user" id="BMS_price" name="BMS_price" placeholder="BMS Price"> </div> </div> <div class="col-sm-6 form-check"> <input type="checkbox" id="tax" name="taxamount" value="0.17"> <label for="tax">Included Tax</label><br> <label for="total_expenses1" style="text-align: right;">Total:- </label> <span id="total_expenses1">0</span> </div>