点击按钮用JavaScript计算总价的实现方案咨询

不管是用原生JavaScript还是jQuery，都能轻松完成这个复选框选后计算总价的功能，下面分别给出实现代码和细节说明：

原生JavaScript方案 #

这个方案不需要引入任何外部库，直接用浏览器原生API就能实现：

<form>
  <div id="uk-form-checkbox">
    <input id="option-1" class="uk-checkbox-box" value="100" name="option-1" type="checkbox">
    <label for="option-1">option 1</label>
    <input id="option-2" class="uk-checkbox-box" value="250" name="option-2" type="checkbox">
    <label for="option-2">option 2</label>
    <input id="option-3" class="uk-checkbox-box" value="500" name="option-3" type="checkbox">
    <label for="option-3">option 3</label>
  </div>
  <div id="uk-form-submit">
    <button id="submit" class="uk-submit-button" type="submit">Calculate Total</button>
  </div>
  <div id="uk-total-price">19.500</div>
</form>

<script>
// 从页面已有元素读取基础价格，后续修改初始价不用改JS代码
const basePrice = parseFloat(document.getElementById('uk-total-price').textContent);

// 监听提交按钮点击事件
document.getElementById('submit').addEventListener('click', function(e) {
  // 阻止表单默认提交行为，避免页面跳转刷新
  e.preventDefault();
  
  let total = basePrice;
  
  // 获取所有被选中的复选框
  const checkedOptions = document.querySelectorAll('.uk-checkbox-box:checked');
  
  // 遍历选中选项，累加额外价格
  checkedOptions.forEach(option => {
    total += parseFloat(option.value);
  });
  
  // 更新总价显示，保留三位小数和初始格式统一
  document.getElementById('uk-total-price').textContent = total.toFixed(3);
});
</script>

关键细节： #

• e.preventDefault()：必须加上这行，不然点击按钮会触发表单默认提交，导致页面跳转
• parseFloat()：把字符串类型的价格值转成数字，避免出现字符串拼接的错误
• toFixed(3)：强制保留三位小数，和你初始显示的19.500格式保持一致

jQuery方案 #

如果你已经引入了jQuery库，这个方案会更简洁：

<form>
  <div id="uk-form-checkbox">
    <input id="option-1" class="uk-checkbox-box" value="100" name="option-1" type="checkbox">
    <label for="option-1">option 1</label>
    <input id="option-2" class="uk-checkbox-box" value="250" name="option-2" type="checkbox">
    <label for="option-2">option 2</label>
    <input id="option-3" class="uk-checkbox-box" value="500" name="option-3" type="checkbox">
    <label for="option-3">option 3</label>
  </div>
  <div id="uk-form-submit">
    <button id="submit" class="uk-submit-button" type="submit">Calculate Total</button>
  </div>
  <div id="uk-total-price">19.500</div>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  // 获取基础价格
  const basePrice = parseFloat($('#uk-total-price').text());
  
  // 绑定提交按钮点击事件
  $('#submit').on('click', function(e) {
    e.preventDefault();
    
    let total = basePrice;
    
    // 遍历所有选中的复选框，累加额外价格
    $('.uk-checkbox-box:checked').each(function() {
      total += parseFloat($(this).val());
    });
    
    // 更新总价显示
    $('#uk-total-price').text(total.toFixed(3));
  });
});
</script>

关键细节： #

• $(function() { ... })：确保DOM完全加载后再执行代码，避免找不到元素的问题
• $('.uk-checkbox-box:checked')：jQuery选择器可以快速定位所有被选中的复选框

另外我帮你把原表单里id和name中的空格改成了连字符（比如option 1改成option-1），这是HTML属性的最佳实践，能避免一些潜在的兼容性问题。

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