购物车源码

利用简单的JavaScript实现购物车的全选、反选功能，并能自动计算选择的个数与商品总价。

兼容大多浏览器，包括IE、火狐、谷歌。

    <%@ page contentType="text/html;charset=UTF-8" language="java">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type" />

  <title>购物车</title>

  <link rel="stylesheet" href="../style.css" type="text/css" />
  <script type="text/javascript">
      function allSelect() 
     {
    var checkObj = document.getElementsByName("checkbox");
        for(var i = 0;i<checkObj.length;i++)
        {
            checkObj[i].checked = true;
        }
    }
    function reverseSelect()
    {
     var checkObj = document.getElementsByName("checkbox");
        for(var i = 0;i<checkObj.length;i++)
        {
            if(checkObj[i].checked == true) 
                checkObj[i].checked = false;
            else if(checkObj[i].checked==false)
                checkObj[i].checked = true;
        }

    }  
       //计算所选商品的件数和总金额
      function getprice(f)
      {
          n =0;
          m =0.0;
      var checks2 = document.getElementsByName("checkbox");
          for(j=0;j<checks2.length;j++)
            {          
        if(checks2[j].checked)
         {
          var mytable = parseFloat(document.getElementById("mytable").rows[j+1].cells[3].innerHTML);
                     m+=mytable;
                     n++;
                }
             }
          f.totalprice.value=m;
          f.num.value=n;
      }

      window.onload=function(){
              var oAll=document.getElementById('all');
              var oReverse=document.getElementById('reverse');
             oAll.onclick=function(){
        allSelect();    
        getprice(this.form);
             };
             oReverse.onclick=function(){
        reverseSelect();         
        getprice(this.form);
             };
      };
</script>

</head>

<body>
  <div>
<form action="../admin/tsz/dobuy.jsp"  method="post">
  <table border="1" align="center"width="100%" height="5%" id="mytable" >
        <tr align="center">  
            <td  width='10%'>***</td>
            <td  width="100">商品缩图</td>   
            <td  width="100">商品名称</td>   
            <td  width="100">价格</td>   
            <td  width="100">编辑</td>  
        </tr>
        <%
            int dangqianye = (Integer)session.getAttribute("shoppage");//当前页数
            int zongye = (Integer)session.getAttribute("shopcount");//总页数

            ArrayList cart =new ArrayList();
            cart=(ArrayList)session.getAttribute("pagearray");
            System.out.println(cart.size());
            System.out.println("sdhfshf");
            for(int i=0;i<cart.size();i++){
            //int infoId =(Integer)session.getAttribute("infoId");
            Cart aa = new Cart();
            aa = (Cart)cart.get(i);
            int infoid=aa.getinfoId();
            orderImpl cartimpl=new orderImpl();
            String name=cartimpl.search1(infoid);
        %>

            <tr>
                <td align="center" height="5%" ><input type="checkbox" name="checkbox" value="<%=aa.getinfoId()%>" onclick="getprice(this.form)"></td>
                <td align="center" height="5%"><img src="../images/carImages/<%=name%>" style="width: 100px; height: 100px;"> </td>
                <td align="center" height="5%" ><%=aa.gettitle()%></td>
                <td align="center" height="5%" name="price" value="<%=aa.getprice()%>"><%=aa.getprice()%></td>
                <td align="center" height="5%"><input type="hidden" name="delete"><a href="../admin/tsz/dodelete.jsp?infoId=<%=aa.getinfoId()%>">删除商品</a></td>
            </tr>
           <% }%>
            </table>
<br> 
<div>
   <a href="../admin/tsz/doCartlist.jsp?dangqian=1">首页</a>
       <%if(dangqianye!=1){%>
        <a href="../admin/tsz/doCartlist.jsp?dangqian=<%=dangqianye-1%>">上一页</a>
        <%}%>
        <%if(dangqianye!=zongye){%>
       <a href="../admin/tsz/doCartlist.jsp?dangqian=<%=dangqianye+1%>">下一页</a>
       <%}%>
       <a href="../admin/tsz/doCartlist.jsp?dangqian=<%=zongye%>">尾页</a>

     <p align="left"  style="color: black">
         <input type="button" value="全选" id="all">
         <input id="reverse" type="button" value="反选"></p>
     <p align="right">
            <a style="color: black">已选商品<input type="text"  id="num" size="1" style="background-color:transparent;color: red; 
                    border-bottom:0px;
                    border-left:0px;
                    border-right:0px;
                    border-top:0px;" >件</a>
            <a style="color: black">合计：￥<input type="text" id="totalprice" size="3" style="background-color:transparent;color: red; 
                    border-bottom:0px;
                    border-left:0px;
                    border-right:0px;
                    border-top:0px;"></a>
     </p>
     <p align="right"><input type="submit" value="立即购买">  
                     <a href="clearcart.jsp">清空购物车</a></p> 

  </div>
             </form>

  </div>
</body>

</html>

利用简单的JavaScript实现购物车的全选、反选功能，并能自动计算选择的个数与商品总价。

猜你喜欢