checkbox 标签实现全选及计算商品总价

最新推荐文章于 2024-05-12 10:35:47 发布

刘备的三弟

最新推荐文章于 2024-05-12 10:35:47 发布

阅读量911

点赞数

分类专栏： js 文章标签： js java

本文链接：https://blog.csdn.net/Mr_Newbie/article/details/108391760

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<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.key}" 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}
                <input name="itemsum" value="${map.value.itemsPrice*map.value.count}" type="hidden">
                </td>
                <td><a href="${ctx}/shopcar/del?id=${map.key}">删除</a></td>
            </tr>
        </c:forEach>

    </table>
    <span>总金额:</span>
    <span id="sumSpan"></span>
</center>
</body>


<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

    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()
    }

//每点击一次复选框就调用一下该方法
    function total() {
        //获取多选框对象数组
        var itemsList = document.getElementsByName("checkcart");
        //获取span对象，为了放置计算的总额
        var sumSpan = document.getElementById("sumSpan");

        var itemsum = document.getElementsByName("itemsum");
        var sum = 0;
        for (var i = 0; i < itemsList.length; i++) {
            //计算勾选的产品
            if (itemsList[i].checked == true) {
                //value属性值为String 所以要进行转换
                sum += parseInt(itemsum[i].value);
            }
        }
        //将总额放进span区域
        sumSpan.innerHTML = sum;

    }

</script>
</html>

刘备的三弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox 标签实现全选及计算商品总价

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><html><head> <title>Title</title></head><body><center> <h
复制链接

扫一扫