给出代码js html css实现一个购物车，要求 购物车包括全选复选按钮，商品名称，价格，数量，小计，删除，共选多少件商品，总计价格，其中在商品页面点击商品就可以将该商品加入购物车，将商品的信息填入购物车对应的位置

好的，我会给你提供一个简单的代码示例，实现一个基本的购物车功能。代码主要涉及到HTML、CSS、JavaScript和jQuery等知识。

HTML代码：

<!-- 商品页面 -->
<div class="item">
  <h3>商品1</h3>
  <p>价格：100元</p>
  <button class="add-to-cart" data-name="商品1" data-price="100">加入购物车</button>
</div>

<div class="item">
  <h3>商品2</h3>
  <p>价格：200元</p>
  <button class="add-to-cart" data-name="商品2" data-price="200">加入购物车</button>
</div>

<!-- 购物车页面 -->
<div class="cart">
  <div class="cart-header">
    <input type="checkbox" id="select-all" />全选
    <button id="delete-selected">删除</button>
  </div>
  <div class="cart-items">
    <!-- 商品信息动态生成 -->
  </div>
  <div class="cart-footer">
    <p>共选<span id="total-count">0</span>件商品</p>
    <p>总计：<span id="total-price">0</span>元</p>
    <button id="checkout">结算</button>
  </div>
</div>

CSS代码：

.cart {
  border: 1px solid #ccc;
  padding: 10px;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cart-header input[type="checkbox"] {
  margin-right: 10px;
}

.cart-items {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.cart-item input[type="checkbox"] {
  margin-right: 10px;
}

.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-footer button {
  background-color: #f60;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.cart-footer button:hover {
  background-color: #f90;
}

JavaScript代码：

$(function() {
  // 添加商品到购物车
  $('.add-to-cart').click(function() {
    var name = $(this).data('name');
    var price = $(this).data('price');
    var itemHtml = '<div class="cart-item">' +
                     '<input type="checkbox" class="item-select" data-price="' + price + '" />' +
                     '<span class="item-name">' + name + '</span>' +
                     '<span class="item-price">' + price + '元</span>' +
                     '<div class="item-quantity">' +
                       '<button class="reduce-quantity">-</button>' +
                       '<span class="quantity">1</span>' +
                       '<button class="add-quantity">+</button>' +
                     '</div>' +
                     '<span class="item-subtotal">' + price + '元</span>' +
                     '<button class="delete-item">删除</button>' +
                   '</div>';
    $('.cart-items').append(itemHtml);
    updateCart();
  });

  // 更新购物车信息
  function updateCart() {
    // 更新商品数量
    var count = $('.item-select:checked').length;
    $('#total-count').text(count);

    // 更新总价
    var totalPrice = 0;
    $('.item-select:checked').each(function() {
      totalPrice += parseFloat($(this).data('price')) * parseInt($(this).siblings('.item-quantity').find('.quantity').text());
    });
    $('#total-price').text(totalPrice.toFixed(2));
  }

  // 全选
  $('#select-all').click(function() {
    $('.item-select').prop('checked', $(this).prop('checked'));
    updateCart();
  });

  // 单选
  $('.item-select').click(function() {
    $('#select-all').prop('checked', $('.item-select:checked').length == $('.item-select').length);
    updateCart();
  });

  // 修改商品数量
  $('.add-quantity').click(function() {
    var quantity = parseInt($(this).siblings('.quantity').text());
    $(this).siblings('.quantity').text(quantity + 1);
    updateSubtotal($(this).parent());
    updateCart();
  });

  $('.reduce-quantity').click(function() {
    var quantity = parseInt($(this).siblings('.quantity').text());
    if (quantity > 1) {
      $(this).siblings('.quantity').text(quantity - 1);
      updateSubtotal($(this).parent());
      updateCart();
    }
  });

  // 更新小计
  function updateSubtotal(item) {
    var price = parseFloat(item.siblings('.item-price').text());
    var quantity = parseInt(item.find('.quantity').text());
    var subtotal = price * quantity;
    item.siblings('.item-subtotal').text(subtotal.toFixed(2) + '元');
  }

  // 删除商品
  $('#delete-selected').click(function() {
    $('.item-select:checked').parent().remove();
    updateCart();
  });

  $('.delete-item').click(function() {
    $(this).parent().remove();
    updateCart();
  });

  // 结算
  $('#checkout').click(function() {
    alert('结算功能待实现');
  });
});

以上代码仅供参考，实际使用中需要根据具体需求进行修改。