购物车全选功能

全选功能在购物车页面中扮演着至关重要的角色。用户通常需要对多个商品进行操作（如批量删除、批量结算等），而全选功能可以极大地简化这些操作。通过合理实现全选功能，我们可以提升用户的购物体验，增加用户的满意度和转化率。

全选功能的实现主要包括以下两个部分：

全选按钮控制子复选框：
- 当用户点击全选按钮时，所有子复选框的状态应与全选按钮保持一致。
子复选框控制全选按钮：
- 当用户手动勾选或取消勾选子复选框时，全选按钮的状态应根据子复选框的选中情况自动更新。

代码

我们使用 jQuery 监听全选按钮的变化事件，并将其状态同步到所有子复选框。

$('#allCheck').on('change', function () {let isChecked = $('#allCheck').prop('checked');$('.checkedBox').prop('checked', isChecked);
});

我们使用 jQuery 监听子复选框的变化事件，并根据子复选框的选中情况更新全选按钮的状态。

$('#cart').on('change', '.checkedBox', function () {if ($('.checkedBox:checked').length !== $('.checkedBox').length) {$('#allCheck').prop('checked', false);} else {$('#allCheck').prop('checked', true);}
});

$('#allCheck').on('change') 监听全选按钮变化
$('.checkedBox').prop('checked') 批量设置复选框状态
$('#cart').on('change', '.checkedBox') 监听商品复选框变化
:checked 选择器筛选已选中的复选框

全选控制子项
- 当 #allCheck 状态变化时，获取其当前选中状态
- 将状态同步至所有 class="checkedBox" 的复选框
子项反控全选
- 统计已选中的子项数量 checkedCount
- 比较已选数量与总数量 total
- 当 checkedCount === total 时，自动勾选全选框