购物车中table实现复选框全选,统计总价
需求分析:
需要在table中点击全选按钮,显示全选,并且在下面显示选择项商品的总价格,再次点击时,全部取消
源码,
<script type
="text/javascript" src
="<%=request.getContextPath()%>/static/js/jquery-1.7.1.min.js"></script
>
<script>
function
setAll(obj
) {
var status
= obj
.checked
;
var itemsList
= document
.getElementsByName("checkcart");
for (var i
= 0; i
< itemsList
.length
; i
++) {
itemsList
[i
].checked
= status
;
}
total()
}
function
total() {
var itemsList
= document
.getElementsByName("checkcart");
var sumSpan
= document
.getElementById("sumSpan");
var sum
= 0;
for (var i
= 0; i
< itemsList
.length
; i
++) {
if (itemsList
[i
].checked
== true) {
sum
+= parseInt(itemsList
[i
].value
);
}
}
sumSpan
.innerHTML
= sum
;
}
</script
>
<body>
<center>
<h3>我的购物车
</h3
>
<table border
="1" style
="width:60%">
<tr>
<td><input type
="checkbox" id
="checkall" name
="checkall" onclick
="setAll(this)"></td
>
<td>id
</td
><td>名称
</td
><td>单价
</td
><td>图片
</td
><td>数量
</td
><td>总价格
</td
><td> 操作
</td
>
</tr
>
<c
:forEach items
="${shopcar}" var
="map">
<tr>
<td><input type
="checkbox" value
="${map.value.itemsPrice * map.value.count}" name
="checkcart"
onclick
="total()" ></td
>
<td>$
{map
.key
}</td
>
<td>$
{map
.value
.itemsName
}</td
>
<td>$
{map
.value
.itemsPrice
}</td
>
<td><img src
="${map.value.pic}" style
="height: 100px;width:100px"> </td
>
<td>$
{map
.value
.count
}</td
>
<td>$
{map
.value
.itemsPrice
* map
.value
.count
}</td
>
<td><a href
="${ctx}/shopcar/del?id=${map.key}">删除
</a
></td
>
</tr
>
</c
:forEach
>
<tr>
<td>合计:
</td
>
<td><span id
="sumSpan"></span
></td
>
</tr
>
</table
>
</center
>
</body
>
转载请注明原文地址:https://tech.qufami.com/read-17444.html