购物车页面商品checkbox勾选与取消勾选功能实现咨询

直接提供可复用的落地实现，覆盖单商品选中、全选联动、金额统计的完整逻辑：

实现要点 #

• 每个购物车商品条目的最左侧放置单个商品的checkbox控件，支持用户独立切换该商品的选中状态
• 购物车列表顶部、底部结算栏各放置一个全选checkbox，两个全选控件状态实时同步
• 选中状态变更时实时计算已选商品数量、总金额，同步控制结算按钮的可用状态
• 选中的商品条目可增加浅背景色高亮，优化交互感知

核心代码 #

HTML结构 #

<!-- 购物车顶部栏 -->
<div class="cart-bar cart-header">
  <label class="checkbox-container">
    <input type="checkbox" id="checkAllTop">
    <span class="checkmark"></span>
    <span class="label-text">全选</span>
  </label>
  <div class="bar-columns">
    <span>商品信息</span>
    <span>单价</span>
    <span>数量</span>
    <span>小计</span>
    <span>操作</span>
  </div>
</div>

<!-- 商品列表区域 -->
<div class="cart-item-wrapper">
  <!-- 单个商品条目，列表渲染时循环生成该结构即可 -->
  <div class="cart-item" data-price="129.00" data-sku="SKU2024001">
    <label class="checkbox-container">
      <input type="checkbox" class="item-checkbox">
      <span class="checkmark"></span>
    </label>
    <div class="item-goods-info">
      <!-- 放置商品主图、标题、规格参数 -->
    </div>
    <div class="item-price">¥129.00</div>
    <div class="item-quantity-control">
      <!-- 数量加减控件 -->
    </div>
    <div class="item-subtotal">¥129.00</div>
    <div class="item-ops">
      <button class="del-btn">删除</button>
    </div>
  </div>
</div>

<!-- 底部结算栏 -->
<div class="cart-bar cart-footer">
  <label class="checkbox-container">
    <input type="checkbox" id="checkAllBottom">
    <span class="checkmark"></span>
    <span class="label-text">全选</span>
  </label>
  <div class="settle-area">
    <p>已选 <em id="checkedCount">0</em> 件商品，总计：<em id="totalAmount">¥0.00</em></p>
    <button id="settleButton" disabled>去结算</button>
  </div>
</div>

交互逻辑（原生JS） #

// 抓取页面元素
const allCheckboxes = document.querySelectorAll('#checkAllTop, #checkAllBottom');
const itemCheckboxes = document.querySelectorAll('.item-checkbox');
const countEl = document.getElementById('checkedCount');
const amountEl = document.getElementById('totalAmount');
const settleBtn = document.getElementById('settleButton');

// 统一更新购物车选中状态
function refreshCartState() {
  // 筛选所有已选中的商品
  const checkedItems = Array.from(itemCheckboxes).filter(cb => cb.checked);
  const checkedNum = checkedItems.length;
  // 计算选中商品总金额
  const total = checkedItems.reduce((sum, cb) => {
    const itemNode = cb.closest('.cart-item');
    const price = Number(itemNode.dataset.price);
    const num = Number(itemNode.querySelector('.quantity-input')?.value || 1);
    return sum + price * num;
  }, 0);
  // 更新统计数据
  countEl.textContent = checkedNum;
  amountEl.textContent = `¥${total.toFixed(2)}`;
  // 同步全选框状态
  const isAllChecked = checkedNum === itemCheckboxes.length && itemCheckboxes.length > 0;
  allCheckboxes.forEach(cb => cb.checked = isAllChecked);
  // 控制结算按钮可用性
  settleBtn.disabled = checkedNum === 0;
}

// 绑定全选框事件
allCheckboxes.forEach(cb => {
  cb.addEventListener('change', () => {
    const targetState = cb.checked;
    itemCheckboxes.forEach(itemCb => itemCb.checked = targetState);
    allCheckboxes.forEach(otherCb => otherCb.checked = targetState);
    refreshCartState();
  })
})

// 绑定单个商品checkbox事件
itemCheckboxes.forEach(cb => {
  cb.addEventListener('change', refreshCartState);
})

// 页面初始化时刷新一次状态
refreshCartState();

样式适配提示 #

• 可以隐藏原生checkbox，用.checkmark元素自定义选中样式，匹配站点整体设计风格
• 建议把checkbox的点击热区扩大到至少40*40px，符合移动端、PC端的点击交互规范
• 商品选中时给.cart-item增加选中类，搭配浅背景色、边框高亮效果，让用户清晰感知选中状态

内容的提问来源于stack exchange，提问作者Mcs Stu