如何实现选中购物车里面的商品然后总价格变化前后端代码

在前端实现选中购物车商品并实时更新总价，通常涉及JavaScript和HTML，这里是一个简单的例子。假设你有一个包含商品信息的数组和一个显示总价的元素：

<!-- 假设每个商品是一个div，id为product，数据存储在一个名为products的数组里 -->
<div id="cart" class="shopping-cart">
  <div data-price="100" data-id="1">商品A</div>
  <!-- 其他商品... -->
</div>

<!-- 总价显示部分 -->
<span id="totalPrice">0元</span>

JavaScript 代码:

// 获取购物车商品和总价元素
const cartItems = document.querySelectorAll('#cart div');
const totalPrice = document.getElementById('totalPrice');

function updateTotalPrice() {
  let totalPriceSum = 0;
  for (let i = 0; i < cartItems.length; i++) {
    const product = cartItems[i];
    if (product.classList.contains('selected')) { // 如果商品被选中
      totalPriceSum += parseFloat(product.dataset.price); // 加入价格到总价
    }
  }
  totalPrice.textContent = totalPriceSum + '元'; // 更新总价
}

// 绑定事件监听商品选中状态改变
cartItems.forEach((item) => {
  item.addEventListener('click', function() {
    this.classList.toggle('selected'); // 选中/取消选中
    updateTotalPrice(); // 每次选择或移除后立即更新总价
  });
});

// 初始加载时更新一次总价
updateTotalPrice();

这个示例假设每个商品有一个`data-price`属性存储价格。在实际应用中，你需要根据后端API设计对应的交互，比如通过Ajax请求发送商品选择的状态更改，然后后端返回最新的总价。