Jquery:计算实时表单输入，它也会随着复选框的变化而变化

Jquery: Calculate real time form input which also changes with checkboxes

本文关键字：变化 复选框 计算 实时 表单 输入 Jquery      更新时间：2023-09-26

我有一个表格，需要在表格上实时计算GST（商品服务税）

（GST=价格/11）

这是我用下面的脚本完成的
但如果我点击
，它也需要更改

复选框（不包括GST）表示GST=价格的10%

和

复选框（GST免费）表示GST=0


HTML表单：

<form class="form-horizontal" name="newItemForm" id="newItemForm" action="" method="post" enctype="multipart/form-data">
              <div class="form-group">
                <input type="text" class="form-control" name="itemName" id="itemName" style="text-transform:capitalize" placeholder="Enter Item Name" autocomplete="off">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" name="price" id="price" placeholder="Item Price" onkeyup="calculateGST()" autocomplete="off"> 
              </div>
              <div>
                <label class="checkbox-inlibe">
                  <input type="checkbox" Value="incGST"> Exc. GST
                </label>
                <label class="checkbox-inlibe">
                  <input type="checkbox" Value="FRE"> GST Free
                </label>
              </div>
              <div class="form-group">
                <input type="text" class="form-control calGST" name="gst" id="gst" placeholder="GST" autocomplete="off" disabled>
              </div>
              <div class="form-group">
                <input type="number" class="form-control" name="unitsPerCTN" id="unitsPerCTN" value="" placeholder="Units Per CRT" autocomplete="off">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" name="supplier" id="supplier" style="text-transform:capitalize" placeholder="Supplier" autocomplete="off">
              </div>
              <button type="submit" name="submit" id="submit" class="btn btn-success">Submit</button>
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </form>

脚本：

<script>
function calculateGST() {
    var priceStr =document.newItemForm.price.value;
    if (!priceStr)
        priceStr = '0';
    var price = parseFloat(priceStr);
    document.newItemForm.gst.value = price / 11;
}
</script>

**注意：jquery也添加在这个页面上。**

您可以通过使用事件侦听器轻松实现这一点。由于您标记了jQuery，因此可以使用.on()方法。

示例：

$('form checkbox').on('change', function(evt) {
    if( $(this).is(':checked') ) {
        //checked
    }else {
        //unchecked
    }
});
$('form input').on('change', function(evt) {
    //do something
});
相关文章：