如何在jQuery中实现单个复选框按小时计算金额的功能

我创建了一组带有不同金额的复选框，其中仅Video Editing复选框需要按小时计算金额，其余复选框均为固定金额。当用户选中Video Editing复选框时，需将输入框（name为t1）中的小时数与该复选框的data-price值（1000）相乘后计入总价，例如小时数为4时，该项目金额为4*1000=4000。现有计算总价的jQuery函数未实现此逻辑，请问如何修改代码实现该功能？

现有代码 #

HTML代码 #

<input type="text" value="3" name="t1">
<label>Book Slots for</label><br/>
<div id="catlist1">
  <input type="checkbox" name="sponsor[]" id="audio" value="Audio Recording" data-price="600">
  Audio Recording

  <input type="checkbox" name="sponsor[]" id="video" value="Video Recording" required data-price="1000"> <b>  Video Recording </b>
  </label><br/>
  <label><input type="checkbox" name="sponsor[]" id="editing" value="Audio editing/dubbing" required data-price="600"> <b>  Audio editing/dubbing </b>
  </label><br/>
  <label><input type="checkbox" name="sponsor[]" id="video_editing" value="Video Editing" required data-price="1000"> <b> Video Editing: 1000 per hour </b>
  </label><br/>
</div>

JS计算代码 #

<script type="text/javascript">
  function calcAndShowTotal() {
    var total = 0;
    $('#catlist1 :checkbox:checked').each(function() {
      total += parseFloat($(this).attr('data-price')) || 0;

    });
    $('#total').val(total);
  }
  $('#catlist1 :checkbox').change(calcAndShowTotal).change();
</script>

要实现需求，需修改计算逻辑并补充输入框的事件监听，具体修改如下：

修改后的JS代码 #

<script type="text/javascript">
  function calcAndShowTotal() {
    var total = 0;
    // 获取小时数，输入为空/非数字时默认取1，可根据需求调整
    var hours = parseFloat($('input[name="t1"]').val()) || 1;
    
    $('#catlist1 :checkbox:checked').each(function() {
      var $checkbox = $(this);
      var price = parseFloat($checkbox.attr('data-price')) || 0;
      
      // 针对Video Editing复选框做特殊计算
      if ($checkbox.attr('id') === 'video_editing') {
        total += price * hours;
      } else {
        total += price;
      }
    });
    $('#total').val(total);
  }

  // 同时监听复选框变化和小时数输入框的输入/变化事件
  $('#catlist1 :checkbox, input[name="t1"]').on('change input', calcAndShowTotal);
  // 页面加载时初始化计算总价
  calcAndShowTotal();
</script>

关键修改说明 #

• 新增小时数获取逻辑：从name="t1"的输入框读取值并转为数字，设置默认值避免空值/非数字导致的计算异常。
• 复选框遍历判断：通过id识别video_editing复选框，对其执行单价×小时数的计算，其余复选框直接累加固定金额。
• 补充事件监听：给t1输入框添加change和input事件，确保用户修改小时数时总价实时更新。
• 初始化调用：页面加载时主动执行计算函数，确保初始状态下总价正确显示。

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