首先来看一下页面布局:
由于这个布局比较简单这里就不说具体的布局思路了,数量加减模块的布局如果不知道怎么布局,可以看这个博客:购物车数量加减模块布局_setTimeout()的博客-CSDN博客。那么我们就直接来看功能实现。
功能实现主要是两个部分:
1.全选和全不选:当选中上面或者下面部分的全选复选框的时候三个小的复选框都被选中,当没选中上面或者下面部分的全选复选框的时候三个小的复选框都不被选中。
2.如果三个小的复选框都被选中则上面和下面部分的全选复选框都被选中,否则都不被选中。
注意:这里有一个知识点就是:checked选择器,因为需要判断被选中的小复选框的个数是否等于3就需要使用这个选择器,这个选择器可以得到被选中的复选框,然后再利用它的length属性来得到被选中的复选框的个数。
完整代码如下(这里只展示jquery的代码,html的代码不展示,如果有不明白的地方可以看代码注释):
$(function() {
// 1.实现全选和全不选功能
// 也就是把全选按钮(checkall)的状态赋值给下面三个小的按钮(j-checkbox)
// 可以采用change事件
$(".c