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>