jQuery:如何防止未勾选的商品价格被加到合计中？

在使用jQuery防止未勾选的商品价格被加到合计中时，你需要确保只有被勾选的商品的价格才会被计算到总价中。这通常涉及到检查商品的复选框是否被选中。

以下是一个简单的示例代码，展示了如何实现这一功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止未勾选的商品价格被加到合计中</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h2>商品列表</h2>
<ul id="product-list">
  <li>
    <input type="checkbox" class="product-checkbox"> 商品1 - ¥<span class="product-price">100</span>
  </li>
  <li>
    <input type="checkbox" class="product-checkbox"> 商品2 - ¥<span class="product-price">200</span>
  </li>
  <li>
    <input type="checkbox" class="product-checkbox"> 商品3 - ¥<span class="product-price">300</span>
  </li>
</ul>

<h2>合计: ¥<span id="total-price">0</span></h2>

<script>
$(document).ready(function() {
  // 初始化合计金额
  updateTotalPrice();

  // 监听复选框的点击事件
  $('#product-list').on('change', '.product-checkbox', function() {
    updateTotalPrice();
  });

  // 更新合计金额的函数
  function updateTotalPrice() {
    let total = 0;
    $('.product-checkbox:checked').each(function() {
      total += parseFloat($(this).siblings('.product-price').text());
    });
    $('#total-price').text(total.toFixed(2));
  }
});
</script>

</body>
</html>

在这个示例中，我们有一个商品列表，每个商品都有一个复选框和一个价格。我们使用jQuery来监听这些复选框的change事件。每当复选框的状态改变时，我们就调用updateTotalPrice函数来重新计算总价。

updateTotalPrice函数会遍历所有被选中的复选框，并累加它们对应的价格。最后，将计算出的总价更新到页面上的#total-price元素中。

这样，只有被勾选的商品的价格才会被加到合计中，未勾选的商品价格不会影响总价。

参考链接：