js实现购物车全选

<input type="checkbox" id="selectAll"> 全选
<ul>
  <li><input type="checkbox" class="itemCheckbox"> 商品1</li>
  <li><input type="checkbox" class="itemCheckbox"> 商品2</li>
  <li><input type="checkbox" class="itemCheckbox"> 商品3</li>
  <!-- 更多商品 -->
</ul>

document.addEventListener('DOMContentLoaded', function() {
  const selectAll = document.getElementById('selectAll');
  const itemCheckboxes = document.querySelectorAll('.itemCheckbox');

  // 初始化全选按钮状态
  updateSelectAll();

  // 全选按钮点击事件
  selectAll.addEventListener('change', function() {
    itemCheckboxes.forEach(checkbox => {
      checkbox.checked = selectAll.checked;
    });
  });

  // 监听每个商品复选框的变化，更新全选按钮状态
  itemCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', updateSelectAll);
  });

  // 更新全选按钮状态的函数
  function updateSelectAll() {
    const allChecked = Array.from(itemCheckboxes).every(checkbox => checkbox.checked);
    selectAll.checked = allChecked;
  }
});