//js页面
//获得所有多选框的对象,将所有多选框的name全部赋值为fav
var fav = document.getElementsByName("fav");
//判断是否全选的操作
function checkTest1(thi){
//直接用this传递过来 ， 所以不需要getbyid获得对象
var flag = thi.checked;//判断是否选择
// if(flag){
// //遍历所有多选框
// for(var i in fav){
// fav[i].checked = true;
// }
// }
// else{
// for(var i in fav){
// fav[i].checked = false;
// }
// }
//直接合并
for(var i in fav){
fav[i].checked = flag;
}
}
//单选决定全选
function checkTest2(){
//定义一个flag
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;
//价格是否统计
for(var i =1;i<fav.lentgh-1;i++){
//先找ul的节点，在找它的子节点获得价格
if(fav[i].checked){
//获得ul父节点
var par = fav[i].parentNode.parentNode;
var li =par.getElementsByTagName("li"); //获得我们指定ul下面的所有li
//单个商品的总价格
var z = li[6].innerText.split("￥")[1];//选取ul节点下的第六个子节点li
//获得我们所有商品的总价格
zong += Number(z);
document.getElementById("zongz").innerText = zong;
}
}
}
//控制数量的增加和减少
function checkPlus(thi){
//获得上一个节点对象
var pre = thi.previousElementSibling;
//获得节点的value值
pre.value = Number(pre.value)+1;
}
function checkReduce(thi){
//获得下一个节点对象
var next = thi.nextElementSibling;
next.value = Number(next.value)-1;
}
//通用方法
function check(thi,num){
var pre;
if(num==1){
//获得下一个节点对象
//当pre大于0时，才可以执行减一
pre= thi.nextElementSibling;
if(Number(pre.value)>0){
pre.value= Number(pre.value)-1;
}
}
else{
//获得上一个节点对象
var pre = thi.previousElementSibling;
//获得节点的value值
pre.value = Number(pre.value)+1;
}
//previousElementSibling返回上一个节点的HTML内容
//计算每一个商品的总价格
//获得li每一个商品的单价节点
var val = pre.parentNode.previousElementSibling.innerHTML; //获得单价成功
val = val.replace("￥","");
var zong = Number(val)* Number(pre.value);
pre.parentNode.nextElementSibling.innerHTML = "￥"+zong;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/jds.css"/>
<!--引入图标的css-->
<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
<script src="js/jd.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--导航开始-->
<div class="nav">
<!--在div里在创建一个div 用于居中-->
<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_but"/>
</div>
</div>
</div>
<!--搜索框结束-->
<!--标题开始-->
<div class="title warp">
<h3>全部商品2</h3>
<div >
<span>配送到</span>
<select>
<option>中卫市</option>
<option>重庆市</option>
<option>安徽</option>
<option>临汾</option>
<option>上海市</option>
</select>
</div>
</div>
<!--标题结束-->
<!--显示菜单开始-->
<div class="tips warp" >
<ul>
<li>
<input type="checkbox" id="all" name="fav" 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="check(this,1)">-</button>
<input type="text" value="1"/>
<button class="bot" onclick="check(this,2)">+</button>
</li>
<li class="info_7">￥182.5</li>
<li class="info_8">
<a>删除</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_5">￥182.5</li>
<li class="info_6">
<button onclick="check(this,1)">-</button>
<input type="text" value="1"/>
<button class="bot" onclick="check(this,2)">+</button>
</li>
<li class="info_7">￥182.5</li>
<li class="info_8">
<a>删除</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_5">￥182.5</li>
<li class="info_6">
<button onclick="check(this,1)">-</button>
<input type="text" value="1"/>
<button class="bot" onclick="check(this,2)"> +</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 = "fav" onclick="checkTest1(this)"/>
全选
</li>
<li><a>删除选择商品</a></li>
<li><a>移到我的关注</a></li>
<li><a>清除下柜商品</a></li>
</ul>
<ul class="balance_ul2">
<li>已经选择<span>0</span>件商品</li>
<li>总价 <span id="zongz">￥0</span></li>
<li><button class="botd"> 去结算</button></li>
</ul>
</div>
<!--结算结束-->
</body>
</html>
最开始的选择变总价，js代码一样为什么总价还是不会变呢
京公网安备 11011402011233号