JavaScript自动计算价格和全选,价格自增加减，复选框，反选，全选。

如图：

如图：

CSS代码

@charset "gb2312";

/* CSS Document */

body{

    margin:0px;

    padding:0px;

    font-size:12px;

    line-height:20px;

    color:#333;

   }

ul,li,ol,h1,dl,dd{

    list-style:none;

    margin:0px;

    padding:0px;

    }

a{

    color:#1965b3;

    text-decoration: none;

    }

a:hover{

    color:#CD590C;

    text-decoration:underline;

    }

img{

    border:0px;

    vertical-align:middle;

    }

#header{

    height:40px;

    margin:10px auto 10px auto;

    width:800px;

    clear:both;

    }

#nav{

    margin:10px auto 10px auto;

    width:800px;

    clear:both;

    }

#navlist{

    width:800px;

    margin:0px auto 0px auto;

    height:23px;

    }

    #navlist li{

        float:left;

        height:23px;

        line-height:26px;

    }

    .navlist_red_left{

        background-image:url(../images/taobao_bg.png);

        background-repeat:no-repeat;

        background-position:-12px -92px;

        width:3px;

        }

    .navlist_red{

        background-color:#ff6600;

        text-align:center;

        font-size:14px;

        font-weight:bold;

        color:#FFF;

        width:130px;

        }

    .navlist_red_arrow{

        background-color:#ff6600;

        background-image:url(../images/taobao_bg.png);

        background-repeat:no-repeat;

        background-position:0px 0px;

        width:13px;

        }

    .navlist_gray{

        background-color:#e4e4e4;

        text-align:center;

        font-size:14px;

        font-weight:bold;

        width:150px;

        }

    .navlist_gray_arrow{

        background-color:#e4e4e4;

        background-image:url(../images/taobao_bg.png);

        background-repeat:no-repeat;

        background-position:0px 0px;

        width:13px;

        }

    .navlist_gray_right{

        background-image:url(../images/taobao_bg.png);

        background-repeat:no-repeat;

        background-position:-12px -138px;

        width:3px;

        }

#content{

    width:800px;

    margin:10px auto 5px auto;

    clear:both;

    }

    .title_1{

        text-align:center;

        width:50px;

        }

    .title_2{

        text-align:center;

        }

    .title_3{

        text-align:center;

        width:80px;

        }

    .title_4{

        text-align:center;

        width:80px;

        }

    .title_5{

        text-align:center;

        width:100px;

        }

    .title_6{

        text-align:center;

        width:80px;

        }

    .title_7{

        text-align:center;

        width:60px;

        }

    .line{

        background-color:#a7cbff;

        height:3px;

        }

    .shopInfo{

        padding-left:10px;

        height:35px;

        vertical-align:bottom;

        }

    .num_input{

        border:solid 1px #666;

        width:25px;

        height:15px;

        text-align:center;

        }

    .cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{

        background-color:#e2f2ff;

        border-bottom:solid 1px #d1ecff;

        border-top:solid 1px #d1ecff;

        text-align:center;

        padding:5px;

        }

    .cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{

        border-right:solid 1px #FFF;

        }

    .cart_td_3{

        text-align:left;

        }

    .cart_td_4{

        font-weight:bold;

        }

    .cart_td_7{

        font-weight:bold;

        color:#fe6400;

        font-size:14px;

        }

    .hand{

        cursor:pointer;

        }

.shopend{

    text-align:right;

    padding-right:10px;

    padding-bottom:10px;

    }

.yellow{

    font-weight:bold;

    color:#fe6400;

    font-size:18px;

    line-height:40px;

    }
// JavaScript Document

/*改变所购商品的数量*/

function changeNum(numId,flag){/*numId表示对应商品数量的文本框ID，flag表示是增加还是减少商品数量*/

    var numId=document.getElementById(numId);

    if(flag=="minus"){/*减少商品数量*/

        if(numId.value<=1){

            alert("宝贝数量必须是大于0");

            return false;

            }

        else{

            numId.value=parseInt(numId.value)-1;

            productCount();

            }

        }

    else{/*flag为add，增加商品数量*/

        numId.value=parseInt(numId.value)+1;

        productCount();

        }

    }

/*自动计算商品的总金额、总共节省的金额和积分*/

function productCount(){

    var total=0;      //商品金额总计

    var integral=0;   //可获商品积分

    var point;      //每一行商品的单品积分

    var price;     //每一行商品的单价

    var number;    //每一行商品的数量

    var subtotal;  //每一行商品的小计

     /*访问ID为shopping表格中所有的行数*/

    var myTableTr=document.getElementById("shopping").getElementsByTagName("tr");

    if(myTableTr.length>0){

    for(var i=1;i<myTableTr.length;i++){/*从1开始，第一行的标题不计算*/

        if(myTableTr[i].getElementsByTagName("td").length>2){ //最后一行不计算

        point=myTableTr[i].getElementsByTagName("td")[3].innerHTML;

        price=myTableTr[i].getElementsByTagName("td")[4].innerHTML;

        number=myTableTr[i].getElementsByTagName("td")[5].getElementsByTagName("input")[0].value;

        integral+=point*number;

        total+=price*number;

        myTableTr[i].getElementsByTagName("td")[6].innerHTML=price*number;

        }

    }

    document.getElementById("total").innerHTML=total;

    document.getElementById("integral").innerHTML=integral;

    }

}

window.onload=productCount;

/*复选框全选或全不选效果*/

function selectAll(){

    var oInput=document.getElementsByName("cartCheckBox");

 for (var i=0;i<oInput.length;i++){

         oInput[i].checked=document.getElementById("allCheckBox").checked;

    }

}

/*根据单个复选框的选择情况确定全选复选框是否被选中*/

function selectSingle(){

    var k=0;

    var oInput=document.getElementsByName("cartCheckBox");

     for (var i=0;i<oInput.length;i++){

       if(oInput[i].checked==false){

          k=1;

          break;

        }

    }

    if(k==0){

        document.getElementById("allCheckBox").checked=true;

        }

    else{

        document.getElementById("allCheckBox").checked=false;

        }

}

/*删除单行商品*/

function deleteRow(rowId){

    var Index=document.getElementById(rowId).rowIndex; //获取当前行的索引号

    document.getElementById("shopping").deleteRow(Index);

    document.getElementById("shopping").deleteRow(Index-1);

    productCount();

    }

/*删除选中行的商品*/

function deleteSelectRow(){

    var oInput=document.getElementsByName("cartCheckBox");

    var Index;

     for (var i=oInput.length-1;i>=0;i--){

       if(oInput[i].checked==true){

         Index=document.getElementById(oInput[i].value).rowIndex; /*获取选中行的索引号*/

         document.getElementById("shopping").deleteRow(Index);

         document.getElementById("shopping").deleteRow(Index-1);

        }

    }

    productCount();

    }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>淘宝购物车页面</title>

<link href="css/myCart.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="js/myCart.js"></script>

</head>

<body>

<div id="header"><img src="data:images/taobao_logo.gif" alt="logo" /></div>

<div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div>

<div id="navlist">

  <ul>

    <li class="navlist_red_left"></li>

    <li class="navlist_red">1. 查看购物车</li>

    <li class="navlist_red_arrow"></li>

    <li class="navlist_gray">2. 确认订单信息</li>

    <li class="navlist_gray_arrow"></li>

     <li class="navlist_gray">3. 付款到支付宝</li>

    <li class="navlist_gray_arrow"></li>

     <li class="navlist_gray">4. 确认收货</li>

    <li class="navlist_gray_arrow"></li>

    <li class="navlist_gray">5. 评价</li>

    <li class="navlist_gray_right"></li>

  </ul>

</div>

<div id="content">

 <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">

 <form action="" method="post" name="myform">

  <tr>

    <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()" />全选</td>

    <td class="title_2" colspan="2">店铺宝贝</td>

    <td class="title_3">获积分</td>

    <td class="title_4">单价（元）</td>

    <td class="title_5">数量</td>

    <td class="title_6">小计（元）</td>

    <td class="title_7">操作</td>

  </tr>

  <tr>

    <td colspan="8" class="line"></td>

  </tr>

  <tr>

    <td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a>    卖家：<a href="#">纤巧百媚</a> <img src="data:images/taobao_relation.jpg" alt="relation" /></td>

  </tr>

   <tr id="product1">

    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td>

    <td class="cart_td_2"><img src="data:images/taobao_cart_01.jpg" alt="shopping"/></td>

    <td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />

        颜色：棕色 尺码：37<br />

        保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /></td>

    <td class="cart_td_4">5</td>

    <td class="cart_td_5">138.00</td>

    <td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')" class="hand"/> <input id="num_1" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="data:images/taobao_adding.jpg" alt="add" onclick="changeNum('num_1','add')"  class="hand"/></td>

    <td class="cart_td_7"></td>

    <td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除</a></td>

  </tr>

  <tr>

    <td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a>    卖家：<a href="#">lokemick2009</a> <img src="data:images/taobao_relation.jpg" alt="relation" /></td>

  </tr>

   <tr id="product2">

    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td>

    <td class="cart_td_2"><img src="data:images/taobao_cart_02.jpg" alt="shopping"/></td>

    <td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />

        保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /> <img src="data:images/taobao_icon_02.jpg" alt="icon" /></td>

    <td class="cart_td_4">12</td>

    <td class="cart_td_5">265.00</td>

    <td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_2','minus')" class="hand"/> <input id="num_2" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="data:images/taobao_adding.jpg" alt="add" onclick="changeNum('num_2','add')"  class="hand"/></td>

    <td class="cart_td_7"></td>

    <td class="cart_td_8"><a href="javascript:deleteRow('product2');">删除</a></td>

  </tr>

   <tr>

    <td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a>    卖家：<a href="#">林颜店铺</a> <img src="data:images/taobao_relation.jpg" alt="relation" /></td>

  </tr>

   <tr id="product3">

    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"  onclick="selectSingle()"/></td>

    <td class="cart_td_2"><img src="data:images/taobao_cart_03.jpg" alt="shopping"/></td>

    <td class="cart_td_3"><a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）</a><br />

        保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /> <img src="data:images/taobao_icon_02.jpg" alt="icon" /></td>

    <td class="cart_td_4">3</td>

    <td class="cart_td_5">85.00</td>

    <td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')" class="hand"/> <input id="num_3" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="data:images/taobao_adding.jpg" alt="add" onclick="changeNum('num_3','add')"  class="hand"/></td>

    <td class="cart_td_7"></td>

    <td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除</a></td>

  </tr>

   <tr>

    <td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a>    卖家：<a href="#">taobao豆豆</a> <img src="data:images/taobao_relation.jpg" alt="relation" /></td>

  </tr>

   <tr id="product4">

    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" onclick="selectSingle()" /></td>

    <td class="cart_td_2"><img src="data:images/taobao_cart_04.jpg" alt="shopping"/></td>

    <td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />

        保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /></td>

    <td class="cart_td_4">12</td>

    <td class="cart_td_5">12.00</td>

    <td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_4','minus')" class="hand"/> <input id="num_4" type="text"  value="2" class="num_input" readonly="readonly"/> <img src="data:images/taobao_adding.jpg" alt="add" onclick="changeNum('num_4','add')"  class="hand"/></td>

    <td class="cart_td_7"></td>

    <td class="cart_td_8"><a href="javascript:deleteRow('product4');">删除</a></td>

  </tr>

   <tr>

   <td  colspan="3"><a href="javascript:deleteSelectRow()"><img src="data:images/taobao_del.jpg" alt="delete"/></a></td>

    <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />

    可获积分 <label class="yellow" id="integral"></label> 点<br />

    <input name=" " type="image" src="data:images/taobao_subtn.jpg" /></td>

  </tr>

  </form>

</table>

</div>

</body>

</html>

JavaScript自动计算价格和全选的更多相关文章

  1. Javascript实现CheckBox的全选与取消全选的代码(转)

    js函数 复制代码 代码如下: <script type="text/javascript"> function checkAll(name) { var el = d ...

  2. JavaScript案例四：全选练习

    JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习 ...

  3. JavaScript -- 操作input CheckBox 全选框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. javascript总结41:表格全选反选,经典案例详解

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  7. 【JavaScript】实现复选框的全选、全部不选、反选

    以较为简洁的程序实现复选框的全选.全部不选.反选 操作. 并且将可变的部分设置为JS的参数,以实现代码复用. 全选和全不选 第一个参数为复选框名称,第二个参数为是全选还是全部不选. function ...

  8. js实现-小框框全选

    点击全选下面单独的肉也会全选,再次点击取消 一个一个点击肉,点完--全选也会被选上 HTML代码---CSS略 <table> <tr> <th> <inpu ...

  9. 微信小程序全选，微信小程序checkbox，微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

随机推荐

  1. Python-基本语法元素

    #TempConvert.py TempStr = input("请输入带有符号的温度值: ") if TempStr[-1] in ['F', 'f']: C = (eval(T ...

  2. camera placement (paraview)

    # 'renderView1' is the view name# current camera placement for renderView1 renderView1.CameraPositio ...

  3. 【Codeforces 340D】Bubble Sort Graph

    [链接] 我是链接,点我呀:) [题意] 让你根据冒泡排序的规则 建立一张图 问你这张图的最大独立子集的大小 [题解] 考虑a[i]会和哪些点连边? 必然是在a[i]左边且比它大的数字以及在a[i]右 ...

  4. windows下swoole安装教程

    1)下载安装cygwin(根据操作系统选择32位或者64位): https://cygwin.com/install.html 选择在windows中虚拟环境的root目录 选择下载安装的网络节点,如 ...

  5. MVC.Net5：添加Tinymce的图片上传功能

    Tinymce是目前几个主流的Web文本编辑器之一,不过它的图片上传功能是要收费的,而其它几个免费的上传图片的插件支持的都是PHP.那么就只能自己动手写一个了(源代码下载). 准备工作如下:1.   ...

  6. [React Testing] Confidently Ship Production React Apps

    We want to make sure that when we ship new code, our users can use the application. The best way we' ...

  7. Axure RP一个专业的高速原型设计工具

    Axure RP是一个专业的高速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司.RP则是Rapid Prototyping(高速原型)的缩写. Axure简要介绍 Axur ...

  8. luogu1063 能量项链

    题目大意 有一串项链,项链上的每个珠子有首尾两个数字,首尾相连的两个珠子的尾数字和头数字相同.每次选择相连的一对珠子,得到第一个项链的首数字*第一个项链的尾数字(第二个项链的首数字)*第二个项链的尾数 ...

  9. Android内存解析（二）— 详解内存，内部存储和外部存储

    总述 觉得十分有必要搞清楚内存,内部存储和外部存储的区别,还有我们在开发中真正将数据存在了手机的哪儿. 先提一个问题:手机设置的应用管理中,每个App下都有清除数据和清除缓存,清除的分别是哪里的数据? ...

  10. matlab中s函数编写心得－转自水木

    S函数是system Function的简称,用它来写自己的simulink模块.(够简单吧,^_^, 详细的概念介绍大伙看帮助吧)可以用matlab.C.C++.Fortran.Ada等语言来写, ...