<!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="wrap">
<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="">洋洋宝贝</a><span>|</span></li>
<li><a href="">我的订单</a><span>|</span></li>
<li><a href="">我的京东</a><span>|</span></li>
<li><a href="">京东会员</a><span>|</span></li>
<li><a href="">企业采购</a><span>|</span></li>
<li><a href="">京东手机</a><span>|</span></li>
<li><a href="">关注京东</a><span>|</span></li>
<li><a href="">客户服务</a><span>|</span></li>
<li><a href="">网站导航</a></li>
</ul>
</div>
</div>
<!--导航结束-->
<!--搜索框开始-->
<div class="search">
<div class="wrap">
<img src="img/logo.jpg" alt="" />
<div class="search_div">
<input type="text" class="search_div_tex"/>
<input type="button" value="搜索" class="search_div_btn"/>
</div>
</div>
</div>
<!--搜索框结束-->
<!--标题的开始-->
<div class="title wrap">
<h3>全部商品</h3>
<div>
<span>配送至</span>
<select name="" id="">
<option>徐汇区</option>
<option>静安区</option>
<option>长宁区</option>
<option>普陀区</option>
</select>
</div>
</div>
<!--标题的结束-->
<!--显示菜单的开始-->
<div class="tips wrap">
<ul>
<li>
<input type="checkbox" name="fav" onclick="checkAll(this),checkSingle()"/>
全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<!--显示菜单的结束-->
<!--商品详情展示的开始-->
<div class="info wrap">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkSingle()"/></li>
<li class="info_2"><img src="img/img1.jpg" width="60px"/></li>
<li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a href="">颜色：灰色+粉红</a></li>
<li class="info_5">182</li>
<li class="info_6">
<button class="btn_1" onclick="checkAdd(this,1),checkSingle()">-</button>
<input type="text" value="0"/>
<button class="btn_2" onclick="checkAdd(this,2),checkSingle()">+</button>
</li>
<li class="info_7">0</li>
<li class="info_8">
<a href="javascript:void(0)" onclick="checkDel(this),checkSingle()">删除</a><br />
<a href="">移到我的关注</a>
</li>
</ul>
</div>
<div class="info wrap">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkSingle()"/></li>
<li class="info_2"><img src="img/img1.jpg" width="60px"/></li>
<li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a href="">颜色：灰色+粉红</a></li>
<li class="info_5">182</li>
<li class="info_6">
<button class="btn_1" onclick="checkAdd(this,1),checkSingle()">-</button>
<input type="text" value="0"/>
<button class="btn_2" onclick="checkAdd(this,2),checkSingle()">+</button>
</li>
<li class="info_7">0</li>
<li class="info_8">
<a href="javascript:void(0)" onclick="checkDel(this),checkSingle()">删除</a><br />
<a href="">移到我的关注</a>
</li>
</ul>
</div>
<div class="info wrap">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkSingle()"/></li>
<li class="info_2"><img src="img/img1.jpg" width="60px"/></li>
<li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a href="">颜色：灰色+粉红</a></li>
<li class="info_5">182</li>
<li class="info_6">
<button class="btn_1" onclick="checkAdd(this,1),checkSingle()">-</button>
<input type="text" value="0"/>
<button class="btn_2" onclick="checkAdd(this,2),checkSingle()">+</button>
</li>
<li class="info_7">0</li>
<li class="info_8">
<a href="javascript:void(0)" onclick="checkDel(this),checkSingle()">删除</a><br />
<a href="">移到我的关注</a>
</li>
</ul>
</div>
<!--商品详情展示的开始-->
<!--商品结算开始-->
<div class="balance wrap">
<ul class="balance_ul1">
<li class=""><input type="checkbox" name="fav" onclick="checkAll(this),checkSingle()"/>
全选
</li>
<li>删除选中商品</li>
<li>移到我的关注</li>
<li>清除下柜商品</li>
</ul>
<ul class="balance_ul2">
<li>已经选择<span class="sp" id="sum">0</span>件商品</li>
<li>总计<span class="sp" id="zongz">0</span></li>
<li><button class="btn3">去结算</button></li>
</ul>
</div>
<!--商品结算结束-->
</body>
</html>
//判断全选操作
var fav=document.getElementsByName("fav")
function checkAll(th){
var flag=th.checked;
//获得多选框对象
for(var i in fav){
fav[i].checked=flag;
}
}
//判断单选操作，决定全选操作
function checkSingle(){
var flag=true;
for(var i=1;i<fav.length-1;i++){
if(!fav[i].checked){
flag=false;
break;
}
}
//单选框决定全选框
fav[0].checked=flag;
fav[fav.length-1].checked=flag;
//商品总价格
var zong=0;
//统计勾选数
var num=0;
//统计商品数量
var sp_count=0;
//单选框决定价格总计
for(var i=1;i<fav.length-1;i++){
if(fav[i].checked){
num++;
//获得ul父节点
var par=fav[i].parentNode.parentNode;
//获得ul下面所有的li节点
var li=par.getElementsByTagName("li");
//单个商品的总价
var z=li[6].innerText.split("￥")[1];
//获得统计节点
zong+=Number(z);
document.getElementById("zongz").innerText=Number(zong);
//获得商品的数量
var counts=li[5].getElementsByTagName("input");
var count=counts[0].value;
sp_count+=Number(count);
//将商品总数量赋值给总计
document.getElementById("sum").innerText=sp_count;
}
}
if(num==0){
document.getElementById("zongz").innerText=0;
document.getElementById("sum").innerText=0;
}
}
//商品的增加和减少
var pre
function checkAdd(th,sig){
if(sig=="1"){
if(Number(pre.value)>0){
pre=th.nextElementSibling;
pre.value=Number(pre.value)-1;
}
}else{
//获得上一个节点
pre=th.previousElementSibling;
//获得节点的value值
pre.value=Number(pre.value)+1;
}
//获得商品的单价
var val=pre.parentNode.previousElementSibling.innerText;
//计算每一个商品的总价
var zong=Number(pre.value)*Number(val);
//把总价格赋值给指定对象
pre.parentNode.nextElementSibling.innerHTML="￥"+zong;
}
//删除商品的操作
function checkDel(th){
//获得父节点div
var div=th.parentNode.parentNode.parentNode;
//删除父节点
div.remove();
}
老师，勾选商品但是数量为0时，总计会出现NaN，这是怎么回事，代码在上面。
虚拟环境
京公网安备 11011402011233号