购物车中常用的复选框全选与反选实例

210 阅读1分钟

全选

复选框的全选与反选经常会在购物车模块见到,全选思路:三个单个的复选框按钮的选中状态跟着全选按钮的状态走

因为 checked 是复选框的固有属性,因此我们可以直接利用 prop() 方法获取和设置该属性

最后,再把全选按钮的状态赋值给三个单个的复选框就可以了

image.png

image.png

反选

当我们每次点击单个的复选框按钮时,需要判断:如果单个的复选框被选中的个数等于 3 ,就应该把全选按钮的状态赋值为 true,否则为 false

单个复选框被选中的个数:

image.png

image.png

如果单个复选框被选中的个数等于所有复选框的个数,则应该把全选按钮选上,否则全选按钮不选:

image.png

image.png