请教老师，为什么跟着代码走，数量还是没有统计起来？
html代码：
<!DOCTYPE html>
<html>
<head>
<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"/>
<meta charset="utf-8" />
<title>购物车</title>
<script src="js/jd.js" type="text/javascript"></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="#">洋洋宝贝</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="warp">
<img src="img/logo.jpg" >
<div class="search_div">
<input type="text" class="search_text" />
<input type="button" value="搜索" class="search_button" />
</div>
</div>
</div>
<!-- 搜索框结束 -->
<!-- 标题开始 -->
<div class="title warp">
<h3>全部商品</h3>
<div>
<span>配送至：</span>
<select>
<!-- <option >--请选择--</option> -->
<option >朝阳区</option>
<option >昌平区</option>
<option >大兴区</option>
<option >顺义区</option>
<option >城东区</option>
</select>
</div>
</div>
<!-- 标题结束 -->
<!-- 显示菜单的开始 -->
<div class="tips warp">
<ul>
<li>
<input type="checkbox" name="cname" id="all" onclick="checkTest1(this),checkTest2()" />
全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<!-- 显示菜单的结束 -->
<!-- 商品的展示开始 -->
<!-- 商品1 -->
<div class="info warp">
<ul>
<li class="info_1">
<input type="checkbox" name="cname" onclick="checkTest2()"/>
</li>
<li class="info_2">
<img src="img/img1.jpg" width="80px" height="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" value="1" />
<button id="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">￥182.5</li>
<li class="info_8">
<a>删除</a>
<br>
<a>移到我的关注</a>
</li>
</ul>
</div>
<!-- 商品2 -->
<div class="info warp">
<ul>
<li class="info_1">
<input type="checkbox" name="cname" onclick="checkTest2()"/>
</li>
<li class="info_2">
<img src="img/img2.jpg" width="80px" height="80px" >
</li>
<li class="info_3"><a>【京东超市】宏碁电脑·第6代智能英特尔@</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" value="1" />
<button id="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">￥158.9</li>
<li class="info_8">
<a>删除</a>
<br>
<a>移到我的关注</a>
</li>
</ul>
</div>
<!-- 商品3 -->
<div class="info warp">
<ul>
<li class="info_1">
<input type="checkbox" name="cname" onclick="checkTest2()"/>
</li>
<li class="info_2">
<img src="img/img3.jpg" width="80px" height="80px" >
</li>
<li class="info_3"><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" value="1" />
<button id="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">￥182.5</li>
<li class="info_8">
<a>删除</a>
<br>
<a>移到我的关注</a>
</li>
</ul>
</div>
<!-- 商品的展示结束 -->
<!-- 结算开始 -->
<div class="balance warp">
<ul class="balance_ul1">
<li>
<input type="checkbox" name="cname" onclick="checkTest1(this),checkTest2()" />
全选
</li>
<li>删除选中商品</li>
<li>移到我的关注</li>
<li>清除下柜商品</li>
</ul>
<ul class="balance_ul2">
<li>已选择<span id="sum">0</span>件商品</li>
<li>总价<span id="all_price">0</span></li>
<li>
<button>去结算</button>
</li>
</ul>
</div>
<!-- 结算结束 -->
</body>
</html>
<!--
JS的变量
var
alert(): 输出语句形式
JS中的数据类型
number(数字类型的数据): 例：1,1.2;
String(字符串类型): 例：'你',"我们";
boolean(布尔类型): 例: true,false;
Object(对象类型): 例: new Date();
JS中特殊数据类型
undefined(未定义)
NaN(不是一个数字) Not a Number的简称
Null(空对象) 例如: var a = null;
-->
js代码：
// 获得所有多选框的对象
var cname = document.getElementsByName("cname");
//判断是否全选操作
function checkTest1(th){
var flag = th.checked;
for(var i in cname){
cname[i].checked = flag;
}
}
// 单选决定全选
function checkTest2(){
// 勾选状态
var flag = true;
for(var i = 1;i < cname.length - 1; i++){
if(!cname[i].checked){
flag = false;
break;
}
}
// 从下标0开始计算
cname[0].checked = flag;
cname[cname.length - 1].checked = flag;
/* --------------------------------------------------- */
// 价格是否统计
var total_price = 0;
// 统计是否有勾选对象
var num = 0;
// 统计商品的数量
var com_all_num = 0;
for( var i = 1; i < cname.length - 1;i++){
if(cname[i].checked){
num++;
// 获得ul的父节点
var par = cname[i].parentNode.parentNode;
// 获得指定ul里面的所有的li
var li = par.getElementsByTagName("li");
// 单个商品的价格
var odd_price = li[6].innerHTML.split("￥")[1];
// 获得所有商品的总价格
total_price += Number(odd_price);
var all_p = document.getElementById("all_price").innerText = total_price;
//获得商品的数量
var com_num = li[5].document.getElementsByTagName("input");
var sp_num = com_num[0].value; // 获得input里的数量值
com_all_num += Number(sp_num);
// 获得商品数量统计的对象
document.getElementById("sum").innerText = com_all_num;
}
}
if(num == 0){
document.getElementById("all_price").innerText = 0;
document.getElementById("sum").innerText = 0;
}
}
// 控制数量的增加和减少
function checkTest3(th,sig){
var pre;
if(sig == "1"){
// 获得下一个节点
pre = th.nextElementSibling;
if(Number(pre.value) > 0){
// 获得节点的value值
pre.value = Number(pre.value) - 1;
}
}else{
// 获得上一个节点
pre = th.previousElementSibling;
// 获得节点的value值
pre.value = Number(pre.value) + 1;
}
// 计算每一个商品总的价格
// 获得每一个商品的单价
var val = pre.parentNode.previousElementSibling.innerHTML;
// 计算总价格
var total = Number(val)*Number(pre.value);
// 把总价格赋值给指定对象
pre.parentNode.nextElementSibling.innerHTML = "￥"+total;
}
运行截图：
京公网安备 11011402011233号