如何在表单中实现输入时实时求和功能？

你的代码已经具备了求和的核心逻辑，但还有几个关键问题需要修正，同时可以扩展功能来满足多输入框的需求：

1. 必须引入jQuery库 #

你当前代码使用了$（jQuery选择器），但页面未引入jQuery，会导致脚本完全无法运行。在<script>标签前添加jQuery的CDN引入：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. 支持多个输入框 #

目前页面只有一个.qtty输入框，要实现多输入框求和，有两种方式：

• 手动添加固定数量输入框：直接在HTML里复制多组输入结构

  <h4>
      Qtty 1<br>
      <input type='text' class='qtty' />
      <br>
      Qtty 2<br>
      <input type='text' class='qtty' />
      <br>
      Qtty 3<br>
      <input type='text' class='qtty' />
  </h4>
  

• 动态添加输入框（更灵活）：添加按钮实现按需新增输入框，在HTML里加按钮：

  <button id="addInput">添加数量输入框</button>
  

  脚本部分补充对应逻辑：

  $('#addInput').click(function() {
      var inputCount = $('.qtty').length + 1;
      $('<div>Qtty ' + inputCount + '<br><input type="text" class="qtty" /></div>').insertBefore('#totalQtty');
      // 给新输入框绑定求和事件
      bindSumEvent();
  });
  

3. 处理非数字输入，避免NaN #

如果用户输入非数字内容，求和结果会变成NaN，可以在计算时把空值或非数字转为0：

function bindSumEvent() {
    $('.qtty').off('input keyup').on('input keyup', function () {
        var sum = 0;
        $('.qtty').each(function() {
            var value = $(this).val().trim();
            sum += isNaN(Number(value)) ? 0 : Number(value);
        });
        $('#totalQtty').val(sum);
    });
}
// 页面加载时绑定初始事件
bindSumEvent();

4. 优化事件监听 #

把单一的keyup事件换成input keyup，这样粘贴内容、鼠标选择输入等操作也能实时触发求和，体验更流畅。

完整改进代码 #

<html>
<body>  
    <h3> Quantity </h3>
    <h4>
        Qtty 1 <br>
        <input type='text' class='qtty' />
    </h4>
    <button id="addInput">添加数量输入框</button>
    <br><br>
    <label>总计：</label>
    <input type='text' id='totalQtty' disabled />

    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        function bindSumEvent() {
            $('.qtty').off('input keyup').on('input keyup', function () {
                var sum = 0;
                $('.qtty').each(function() {
                    var value = $(this).val().trim();
                    sum += isNaN(Number(value)) ? 0 : Number(value);
                });
                $('#totalQtty').val(sum);
            });
        }

        // 初始化绑定事件
        bindSumEvent();

        // 动态添加输入框
        $('#addInput').click(function() {
            var inputCount = $('.qtty').length + 1;
            $('<div>Qtty ' + inputCount + '<br><input type="text" class="qtty" /></div>').insertBefore('#totalQtty');
            bindSumEvent();
        });
    </script>
</body>
</html>

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