js实现购物车全选

在JavaScript中实现购物车的全选功能，主要涉及以下几个基础概念：

基础概念

DOM操作：JavaScript通过DOM（文档对象模型）与HTML页面进行交互。
事件监听：为元素添加事件监听器，以便在特定事件发生时执行代码。
条件判断：使用条件语句来控制程序的流程。

实现步骤

HTML结构：创建一个复选框用于全选，以及多个复选框代表购物车中的商品。
JavaScript逻辑：编写脚本来处理全选复选框的状态变化，并同步更新所有商品复选框的状态。

示例代码

HTML部分

<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>

JavaScript部分

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;
  }
});