Goods:购物车模块之全选按钮与条目之复选按钮的click事件

 1 <script type="text/javascript">
 2     /*
 3      计算总计方法
 4      */
 5     $(function() {
 6
 7         showTotal(); //文档加载完就计算总计
 8
 9         //给全选添加click事件
10         $("#selectAll").click(function() {
11             //获取全选的状态
12             var bool = $("#selectAll").attr("checked");
13             //让所有的条目的复选框与全选按钮状态同步
14             setItemCheckBox(bool);
15             //让结算按钮与全选的状态同步
16             setJieSuan(bool);
17
18             //重新计算总计
19             showTotal();
20
21         });
22
23         //给所有的条目的复选框添加click事件
24         $(":checkbox(name=checkboxBtn)").click(function() {
25
26             //所有条目的个数拿出来
27             var all = $(":checkbox[name=checkboxBtn]").length;
28             //选中的数目拿出来
29             var select = $(":checkbox[name=checkboxBtn][checked=true]").length
30
31             if (all == select) {
32                 //勾选全选按钮
33                 $("#selectAll").attr("checked", true);
34                 setJieSuan(true);
35             } else if (select == 0) {
36                 $("#selectAll").attr("checked", false);
37                 setJieSuan(false);
38
39             } else {
40                 $("#selectAll").attr("checked", false);
41                 setJieSuan(true);
42             }
43             showTotal();
44
45         });
46
47     });
48
49     function showTotal() {
50         var total = 0;
51         //1获取所有被勾选的复选块
52         $(":checkbox[name=checkboxBtn][checked=true]").each(function() {
53             //2获取复选块的值 即cartItemid
54             var id = $(this).val();
55             //3再通过cartItemId找到小计 获取内容
56             var text = $("#" + id + "Subtotal").text();
57             //4累加操作  字符串累加 会越变越长
58             total += Number(text);
59
60         });
61         //5总计显示在总计元素
62         $("#total").text(total);
63
64     }
65
66     //统一设置所有条目的复选按钮
67     function setItemCheckBox(bool) {
68         $(":checkbox[name=checkboxBtn]").attr("checked", bool);
69
70     }
71
72     //设置结算按钮样式
73     function setJieSuan(bool) {
74         if (bool) {
75             $("#jiesuan").removeClass("kill").addClass("jiesuan");
76             //把之前的事件注销掉
77             $("#jiesuan").unbind("click"); //撤销当前元素所有的click事件
78         } else {
79             //设置样式 在css中有样式
80             $("#jiesuan").removeClass("jiesuan").addClass("kill");
81             //设置超链接不可用 click返回false
82             $("#jiesuan").click(function() {
83                 return false;
84             });
85         }
86
87     }
88 </script>