Checkbox not working on checked to add values-CodePudding

I have created calculation system project with javascripts all things are good calculation done perfectly tax include perfectly but tax not included when I click on checkebox, it add when I type something in input field, I want values changes on when I clicked on checkbox and even when I type something

html

<div >
  <div >
    <input type="float"  id="BMS_qty" name="BMS_qty" placeholder="BMS Quantity">
    <input type="float"  id="BMS_price" name="BMS_price" placeholder="BMS Price">
  </div>
</div>

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

CodePudding user response：

The problem is that the keyup() method will only act on an <input type="checkbox"> when the space key is pressed to activate it.

To avoid this kind of problem I'd suggest switching the code to react to input events (which covers any event in which the value/state of an <input> is changed).

One approach to solving the problem is below, with explanatory comments included:

// 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 >
  <div >
    <input type="float"  id="BMS_qty" name="BMS_qty" placeholder="BMS Quantity">
    <input type="float"  id="BMS_price" name="BMS_price" placeholder="BMS Price">
  </div>
</div>

<div >
  <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 demo.

References:

JavaScript:

CodePudding user response：

You need to use on() to get events you need

I think, you also need to change Number() by parseInt()

$(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 >
  <div >
    <input type="float"  id="BMS_qty" name="BMS_qty" placeholder="BMS Quantity">
    <input type="float"  id="BMS_price" name="BMS_price" placeholder="BMS Price">
  </div>
</div>
            
<div >
  <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>