全选和反选

在电商的购物车中,当将购物车中的商品全部选中的时候,其底部或首部全选标志也会被选中,当选中全选的标志的时候,购物车中的所有商品也会被选中。


image.png

使用js实现全选和反选的一个基本思路:
1.首先获取全选复选框和其他单个选项的复选框
2.当选中全选的时候,循环遍历下面的单个选项复选框,将其设置为选中状态
3.当选择单个选项的复选框的时候,每次点击都要进行判断,看是否所有的单项复选框全部都选中,如果都选中,则全选复选框也设置为选中状态
1.HTML页面结构和CSS样式为:


商品 价格
Dell 灵越 8188
MacBook Air 18999
Honor Magic 13999
iPhone 11 7999

2.js代码为:


你可能感兴趣的:(全选和反选)