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. bat 读取当前目录指定文件信息并拼接

    bat 读取指定文件的信息并拼接成指定格式

  2. Pyhon信息采集 - 喜马拉雅专辑歌曲

    目录 Pyhon信息采集 - 喜马拉雅专辑歌曲 Pyhon信息采集 - 喜马拉雅专辑歌曲 setting.py # 喜马拉雅URL XMLY_URL = "https://www.ximal ...

  3. 分布式服务框架Dubbo入门案例和项目源码

    本项目源代码:http://download.csdn.net/detail/fansunion/9498406 Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案, 是 ...

  4. 激活Windows

    额外的启动参数(键):/win=act – 在隐藏模式下运行程序,激活 Windows 并退出程序./ofs=act – 在隐藏模式下运行程序,激活 Office 并退出程序./wingvlk – 在 ...

  5. 【ACM】nyoj_132_最长回文子串_201308151713

    最长回文子串 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 输入一个字符串,求出其中最长的回文子串.子串的含义是:在原串连续出现的字符串片段.回文的含义是:正着看和 ...

  6. Bootstrap：解决Bootstrap下拉框需要双击才能打开的问题

    当使用AngularJS和Bootstrap时,会发生菜单栏navbar控件 需要点击两下才能打开的问题.解决的方法就是在页面加载后,执行如下语句: // 防止下拉菜单需要双击的bug $('.dro ...

  7. [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' ...

  8. Android之怎样使用ListView列表视图

    ListView 列表视图创建方法: (1)直接使用ListView 组件创建 (2)让Activity继承ListActivity实现 第一种:在XML中直接使用ListView 组件创建 在val ...

  9. http get请求获取server返回的应答数据

    libcurl库中的參数CURLOPT_WRITEFUNCTION所设置的回调函数应该是这种: size_t fun_cb( char *ptr, size_t size, size_t nmemb, ...

  10. bootstrap学习——javascript插件篇

    飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1.    引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞 ...