JS实现购物车中的动态操作（全选、统计数据、结账）
html代码;
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jd.css" />
<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />
<script type="text/javascript" src="js/jd.js"></script>
网页购物车代码</head>
<body>
<!--导航开始-->
<div class="nav">
<div class="warp">
<ul class="nav_ul1">
<li><a href=""><i class="iconfont"></i>京东⾸页</a></li>
<li><a href="">配送到：北京</a></li>
</ul>
<ul class="nav_ul2">
<li><a href="">洋洋宝贝<span>|</span></a></li>
<li><a href="">我的订单<span>|</span></a></li>
<li><a href="">我的京东<span>|</span></a></li>
<li><a href="">京东会员<span>|</span></a></li>
<li><a href="">企业采购<span>|</span></a></li>
<li><a href="">京东⼿机<span>|</span></a></li>
<li><a href="">关注京东<span>|</span></a></li>
<li><a href="">客户服务<span>|</span></a></li>
<li><a href="">⽹站导航</a></li>
</ul>
</div>
</div>
<!--搜索框开始-->
<div class="search">
<div class="warp">
<img src="img/logo.jpg">
<div class="search_div">
<input type="text" class="search_text" />
<input type="button" value="搜索" class="search_but" />
</div>
</div>
</div>
<!--标题开始-->
<div class="title warp">
<h3>全部商品</h3>
<div>
<span>配送到</span>
<select>
<option value="">昌平区</option>
<option value="">⼤兴区</option>
<option value="">海定区</option>
<option value="">长阳去</option>
<option value="">朝阳区</option>
</select>
</div>
</div>
<!--显⽰菜单开始-->
<div class="tips warp">
<ul>
<li>
<input type="checkbox" name="fav" id="all" onclick="checkTest1(this)" />
<input type="checkbox" name="fav" id="all" onclick="checkTest1(this)" />全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>⼩计</li>
<li>操作</li>
</ul>
</div>
<!--商品详情展⽰开始-->
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav"/ onclick="checkTest2()"></li>
<li class="info_2"><img src="img/img1.jpg" width="80px"></li>
<li class="info_3"><a>【京东超市】desha春秋季⼉童休闲服</a></li>
<li class="info_4"><a>颜⾊：灰⾊+粉红</a> </li>
<li class="info_5">182.5</li>
<li class="info_6">
<button onclick="checkTest3(this,1),checkTest2()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">￥182.5</li>
<li>
<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br /> <!--
# 包含了⼀个位置信息，默认的锚是#top 也就是⽹页的上端。
⽽javascript:void(0), 仅仅表⽰⼀个死链接
-->
<a>已到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
<li class="info_2"><img src="img/img1.jpg" width="80px"></li>
<li class="info_3"><a>【京东超市】desha春秋季⼉童休闲服</a></li>
<li class="info_4"><a>颜⾊：灰⾊+粉红</a> </li>
<li class="info_5">182.5</li>
<li class="info_6">
<button onclick="checkTest3(this,1),checkTest2()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">￥182.5</li>
<li>
<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br /> <a>已到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
<li class="info_2"><img src="img/img1.jpg" width="80px"></li>
<li class="info_3"><a>【京东超市】desha春秋季⼉童休闲服</a></li>
<li class="info_4"><a>颜⾊：灰⾊+粉红</a> </li>
<li class="info_4"><a>颜⾊：灰⾊+粉红</a> </li>
<li class="info_5">182.5</li>
<li class="info_6">
<button onclick="checkTest3(this,1),checkTest2()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">￥182.5</li>
<li>
<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br /> <a>已到我的关注</a>
</li>
</ul>
</div>
<!--结算开始-->
<div class="balance warp">
<ul class="balance_ul1">
<li>
<input type="checkbox" name="fav" id="" value="" onclick="checkTest1(this)" />全选
</li>
<li><a>删除选中商品</a></li>
<li><a>移到我的关注</a></li>
<li><a>清除下柜商品</a></li>
</ul>
<ul class="balance_ul2">
<li>已经选择<span id="snum">0</span>件商品</li>
<li>总价 <span id="zongz">￥0</span></li>
<li>
<button class="butt">去结算</button>
</li>
</ul>
</div>
</body>
</html>
js代码
//获得所有属性name为fav的多选框
var ElementsByName("fav");
/
/判断是否全选
function checkTest1(th){
var flag=th.checked;//点击全选
//alert(flag);
/* if(flag){
for(var i in fav){
fav[i].checked=true;
}
}else{
for(var i in fav){
fav[i].checked=false;
fav[i].checked=false;
}
}
*/
for(var i in fav){
fav[i].checked=flag;
}
}
//单选决定全选操作
function checkTest2(){
var flag=true;
for(var i=1;i<fav.length-1;i++){
if(!fav[i].checked){//如果有有个没被选择，则返回false flag=false;
break;
}
}
//决定框是否勾选
fav[0].checked=flag;
fav[fav.length-1].checked=flag;
//价格是否统计
//商品的总价格
var zong=0;
/
/统计是否有勾选的对象
var num=0;
//统计商品的数量
var spNum=0;
for(var i=1;i<fav.length-1;i++){
if(fav[i].checked){
//获得ul⽗节点
num++;
var par=fav[i].parentNode.parentNode;
//获得指定ul下⾯的所有的li
var ElementsByTagName("li");
/
/单个商品的总价格
var z=li[6].innerText.split("￥")[1];
//获得所有商品的总价格
zong+=Number(z);
//获得商品的数量
var z2=li[5].getElementsByTagName("input");
var num2=z2[0].value;
spNum+=Number(num2);
//获得商品数量统计的对象
}
}
if(num==0){
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论