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>
