前端交互：jQuery多滑块值动态求和与总和限制实践

$(document).ready(function() {
  // 确保滑块初始值为0 (如果未通过HTML或表单构建器设置)
  // 即使通过HTML value="0" 设置，此行也可作为额外的保险，确保DOM加载后状态一致
  $('.slider').val(0);

  // 定义一个函数来更新滑块总和的显示
  function updateSliderTotal() {
    var sum = 0;
    $('.slider').each(function() {
      // 使用parseInt确保值是整数，并处理可能的非数字输入，非数字按0处理
      sum += parseInt($(this).val()) || 0; 
    });
    $('#total').text(sum);
  }

  // 页面加载时立即调用一次，以显示正确的初始总和
  updateSliderTotal();

  // 监听所有class为'slider'的input元素的'change'事件
  $('.slider').on('change', function() {
    var currentSlider = $(this); // 获取当前操作的滑块
    var sum = 0;

    // 遍历所有滑块，计算当前总和
    $('.slider').each(function() {
      sum += parseInt($(this).val()) || 0; // 确保是数字，非数字按0处理
    });

    // 检查总和是否超过100
    if (sum > 100) {
      // 如果总和超出，需要反向调整当前操作的滑块的值
      // 计算超出部分：sum - 100
      // 当前滑块的新值 = 当前滑块的旧值 - (超出部分)
      var newValue = parseInt(currentSlider.val()) - (sum - 100);
      currentSlider.val(newValue); // 设置调整后的值

      // 调整后，实际总和应为100，所以将sum变量也设为100，以确保显示正确
      sum = 100; 
    }

    // 更新显示总和的元素
    $('#total').text(sum);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>当前总和: <span id="total">0</span></p>

<label for="input_1_1">选项 A:</label>
<input name="input_1" id="input_1_1" type="number" step="1" min="0" max="100" value="0" class="slider" />
<br>

<label for="input_1_2">选项 B:</label>
<input name="input_2" id="input_1_2" type="number" step="1" min="0" max="100" value="0" class="slider" />
<br>

<label for="input_1_3">选项 C:</label>
<input name="input_3" id="input_1_3" type="number" step="1" min="0" max="100" value="0"