使用JS取消勾选复选框后如何获取特定公式的默认计算值

问题描述 #

我有两个输入框，一个存储Quantity（数量）的值，另一个存储Price（单价）的值。类型为number的数量输入框默认带有disabled属性，勾选复选框后会移除该disabled属性，修改数量时会自动计算单价与数量的乘积作为总金额。
示例：quantity = 2、price = 10时，总金额total=2*10=20。
现在遇到的问题是：取消勾选复选框时，我不需要使用最新的计算结果，而是要展示数据库中预先存储的、未引入自定义quantity计算前的默认总金额。
以下是可以复现问题的示例代码：

JS代码

$(document).on('click', '.check_box', function(){
    var price = $('.price').val();
    if(this.checked){
        $('.quantity').removeAttr('disabled');
        $(document).on('change', '.quantity', function(){
            var quantity = $(this).val();
            total = quantity*price;
            $('#total').text(total.toFixed(2));
        });
    } else {
        $('.quantity').attr('disabled', 'disabled');
        // What should I do in else statement?
    }
});

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>#</td>
      <td>Item name</td>
      <td>Quantity</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="check_box" /></td>
      <td>Pizza</td>
      <td><input type="number" class="quantity" value="1" disabled/></td>
      <td><input type="text" class="price" value="20.00" disabled /></td>
    </tr>
  </tbody>
</table>
Total: <p id="total">40.00</p> <!-- 这里的初始值是已经存在数据库中的默认总金额 -->

解决方案 #

你的原有代码存在两个可以优化的点：

1. 每次勾选复选框都会给数量输入框重复绑定change事件，多次勾选会导致同一个计算逻辑执行多次，容易出现异常
2. 没有提前缓存数据库返回的默认总金额，取消勾选时没有恢复依据

修改后的代码如下：

// 页面加载完成后缓存初始默认值
$(function() {
  // 缓存数据库返回的初始总金额
  $('#total').data('defaultTotal', $('#total').text());
  // 可选：缓存初始数量，取消勾选时可以重置输入框内容
  $('.quantity').data('defaultQuantity', $('.quantity').val());
});

$(document).on('click', '.check_box', function(){
  const price = parseFloat($('.price').val()) || 0;
  if(this.checked){
    $('.quantity').removeAttr('disabled');
  } else {
    $('.quantity').attr('disabled', 'disabled');
    // 恢复默认总金额
    $('#total').text($('#total').data('defaultTotal'));
    // 可选：重置数量输入框为初始值
    $('.quantity').val($('.quantity').data('defaultQuantity'));
  }
});

// 数量变更事件统一绑定，只执行一次
$(document).on('change', '.quantity', function(){
  // 仅复选框勾选时才执行计算
  if (!$('.check_box').is(':checked')) return;
  const quantity = parseInt($(this).val()) || 0;
  const price = parseFloat($('.price').val()) || 0;
  const total = quantity * price;
  $('#total').text(total.toFixed(2));
});

主要修改点说明：

• 页面初始化时把数据库带来的初始值存在元素的data属性中，不会污染全局作用域，取值也方便
• 把数量的change事件从复选框点击逻辑中移出，全局只绑定一次，避免重复绑定的问题
• 增加了数值类型转换和兜底逻辑，避免空值、非数值内容导致的计算错误
• 取消勾选时直接读取缓存的默认总金额赋值即可，可选同步重置数量输入框的内容

内容的提问来源于stack exchange，提问作者Hazem Behairy