复选框未选中以添加值。

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

问题是，只有在按下空间键以激活<input type="checkbox">时，<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 Fiddle演示。

参考文献：

JavaScript：

• 条件(“三元”)算子。
• parseFloat()。
• parseInt()。
• jQuery：
  • is()。
  • on()。
  • text()。

Answer 2

您需要使用关于()来获取所需的事件

我认为，您还需要用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>

​