购物车中table实现复选框全选,统计总价

tech2024-07-14  53

购物车中table实现复选框全选,统计总价

需求分析:

需要在table中点击全选按钮,显示全选,并且在下面显示选择项商品的总价格,再次点击时,全部取消

源码,

<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery-1.7.1.min.js"></script> <script> function setAll(obj) { //获取全选的状态,这里函数传入参数this var status = obj.checked; //根据name属性获取产品数组,该数组元素是多选框标签对象 var itemsList = document.getElementsByName("checkcart"); for (var i = 0; i < itemsList.length; i++) { //将全选的状态给每个多选框 itemsList[i].checked = status; } //然后每次都会再次调用total(),进行数据的更新 total() } function total() { //获取多选框对象数组 var itemsList = document.getElementsByName("checkcart"); //获取span对象,为了放置计算的总额 var sumSpan = document.getElementById("sumSpan"); var sum = 0; for (var i = 0; i < itemsList.length; i++) { //计算勾选的产品 if (itemsList[i].checked == true) { //value属性值为String 所以要进行转换 sum += parseInt(itemsList[i].value); } } //将总额放进span区域 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>
最新回复(0)