jquery（JavaScript）购物车案例，全选、修改商品的数量3种方式，小计、结算、删除、背景色

在jQuery中创建一个简单的购物车功能，我们可以设计以下几个关键元素：

1. **商品列表**：每个商品作为一个`<div>`，包含商品名、原价、当前数量以及“+”、“-”按钮用于增减数量。

<ul id="cart-items">
  <li class="item">
    <span class="name">商品A</span>
    <input type="number" class="quantity" value="1">
    <button class="decrement">-</button>
    <button class="increment">+</button>
    <span class="price">原价：$10</span>
  </li>
  <!-- 添加更多商品 -->
</ul>

2. **全选/取消全选按钮**：通过设置复选框状态，控制所有商品的数量同步增减。

<input type="checkbox" id="selectAll">
<button id="toggleAll">全选/取消全选</button>

3. **小计、结算和删除操作**：计算总价（遍历商品），添加“结算”按钮触发提交订单，删除按钮则移除对应商品。

$(document).ready(function() {
  // 商品数量变动
  $('.increment').click(function() {
    var $item = $(this).closest('.item');
    $item.find('.quantity').val(parseInt($item.find('.quantity').val()) + 1);
  });

  $('.decrement').click(function() {
    if ($(this).prev().val() > 0) {
      var $item = $(this).closest('.item');
      $item.find('.quantity').val(parseInt($item.find('.quantity').val()) - 1);
    }
  });

  // 全选/全不选处理
  $('#selectAll').change(function() {
    var isChecked = this.checked;
    $('#cart-items input[type=number]').each(function() {
      $(this).prop('checked', isChecked);
    });
  });

  // 小计计算
  function calculateTotal() {
    var total = 0;
    $('#cart-items .item').each(function() {
      total += parseInt($(this).find('.quantity').val()) * parseFloat($(this).find('.price').text().split(':')[1]);
    });
    $('#total').text(total.toFixed(2));
  }

  // 结算按钮点击事件
  $('#submitOrder').click(calculateTotal); // 更新总金额并准备提交

  // 删除按钮点击事件
  $('#cart-items').on('click', '.delete', function() {
    $(this).parent().remove();
    calculateTotal();
  });
  
  // 初始加载时计算小计
  calculateTotal();
});