window.onload=function(){
//header头部，input搜索输入框
var seek=document.querySelector('.seek');
var seekTxt=seek.querySelector('.seek-txt');
var shop=document.querySelector('.shop');
checkAll=shop.querySelector('.checkAll'),
check=shop.querySelectorAll('.check'),
shopItem=shop.querySelectorAll('.shop-item'),
shopAccounts=shop.querySelector('.shop-accounts-money'),
index=0;
console.log(shopAccounts);
//商品项全选或反选
for(var i=0;i<check.length;i++){
check[i].checked=true;
checkAll.checked=true;
Allchecked(check[i]);
index=check.length;
check[i].onclick=function(){
if(this.checked==true){
index++;
console.log(index);
if(check.length==index){checkAll.checked=true}
}else if(this.checked==false){
index--;
if(index<=0){index=0}
console.log(index);
checkAll.checked=false;
}
}
}
function Allchecked(all){
checkAll.onclick=function(){
if(checkAll.checked==true){
for(var i=0;i<check.length;i++){check[i].checked=true;}
}else if(checkAll.checked==false){
for(var i=0;i<check.length;i++){check[i].checked=false}
}
}
}
//商品金额计算
for(var j=0;j<shopItem.length;j++){
countMoney(shopItem[j]);
}
function countMoney(data){
var countPrice=data.querySelector('.countPrice'),//总价
unitPrice=data.querySelector('.unitPrice-money'),//单价
subtract=data.querySelector('.subtract'),//累减
amount=data.querySelector('.amount'),//text文本框
add=data.querySelector('.add');//累加
var numInput=Number(amount.value),
price=parseInt(unitPrice.innerHTML);
subtract.onclick=function(){
if(numInput>1){
numInput--;
amount.value=numInput;
countPrice.innerHTML=price*numInput;
}
}
add.onclick=function(){
if(numInput<99){
numInput++;
amount.value=numInput;
countPrice.innerHTML=price*numInput;
}
}
//利用onchange事件确定用户在amount手动输入值的变化
amount.onchange=function(){
if(isNaN(this.value)){
alert('请用数字表示商品数量! 如：1 2 3...');
this.value=1;
}else if(this.value<=0||this.value>=99){
alert('商品数量不能为 0 或大于库存量，请重新输入！');
this.value=1;
countPrice.innerHTML=price*this.value;
}else{
countPrice.innerHTML=this.value*price;
}
}
}
//商品应付金额计算 这里怎么写，老是计算点击那个商品项金额？
// function paymentMoney(){
// var unitPrice=shop.querySelector('.unitPrice-money');
// var amount=shop.querySelector('.amount');
// var numInput=Number(amount.value);
// var price=parseInt(unitPrice.innerHTML);
// for(var k=0;k<shopItem.length;k++){
// shopAccounts.innerHTML=price*numInput;
// }
// }
// paymentMoney();
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/script.js"></script>
</head>
<body>
<!--导航-->
<header class="header">
<div class="header-item-left">
<a href="javscript:;"><img src="img/logo.png" /></a>
<ul>
<a href="javascript:;"><li>课程</li></a>
<a href="javascript:;"><li>职业路径</li></a>
<a href="javascript:;"><li>实战</li></a>
<a href="javascript:;"><li>猿问</li></a>
<a href="javascript:;"><li>手记</li></a>
</ul>
</div>
<div class="header-item-right">
<a class="header-item-right_icon_3" href="javascript:;"></a>
<a class="header-item-right_icon_2" href="javascript:;"></a>
<a class="header-item-right_icon_1" href="javascript:;"></a>
<div class="seek">
<input type="text" class="seek-txt" placeholder=""/>
<a href="javascript:;" class="seek-icon"></a>
</div>
</div>
</header>
<!--背景修饰图片-->
<section class="banner"></section>
<!--购物结算窗口-->
<aside class="shop">
<h1>我的购物车</h1>
<div class="shop-content">
<!--购物商品窗口导航-->
<div class="shop-nav">
<input type="checkbox" class="checkAll" id="box"/>
<label class="shop-nav-item_1" for="box">全选</label>
<span class="shop-nav-item_2">商品名称</span>
<span class="shop-nav-item_3">总价</span>
<span class="shop-nav-item_4">单价</span>
<span class="shop-nav-item_5">数量</span>
<span class="shop-nav-item_6">操作</span>
</div>
<div class="shop-item">
<input type="checkbox" class="check" />
<span>
<a href="javascript:;" class="shop-item-img_1"></a>
<a href="javascript:;" class="shop-item_title">前端小白成长记</a>
</span>
<div class="shop-item-price">
<span class="count">￥ <b class="countPrice">396</b></span>
<span class="unitPrice">￥<b class="unitPrice-money">396</b></span>
<input type="button" value="-" class="subtract"/>
<input type="text" value="1" class="amount" />
<input type="button" value="+" class="add" />
</div>
<span class="shop-item-delete">删除</span>
</div>
<div class="shop-item">
<input type="checkbox" class="check" />
<span>
<a href="javascript:;" class="shop-item-img_2"></a>
<a href="javascript:;" class="shop-item_title">前端小白成长记</a>
</span>
<div class="shop-item-price">
<span class="count">￥<b class="countPrice">396</b> </span>
<span class="unitPrice">￥ <b class="unitPrice-money">396</b></span>
<input type="button" value="-" class="subtract"/>
<input type="text" value="1" class="amount" />
<input type="button" value="+" class="add" />
</div>
<span class="shop-item-delete">删除</span>
</div>
<div class="shop-item">
<input type="checkbox" class="check" />
<span>
<a href="javascript:;" class="shop-item-img_3"></a>
<a href="javascript:;" class="shop-item_title">前端小白成长记</a>
</span>
<div class="shop-item-price">
<span class="count">￥ <b class="countPrice">396</b></span>
<span class="unitPrice">￥ <b class="unitPrice-money">396</b></span>
<input type="button" value="-" class="subtract"/>
<input type="text" value="1" class="amount" />
<input type="button" value="+" class="add" />
</div>
<span class="shop-item-delete">删除</span>
</div>
<div class="shop-item">
<input type="checkbox" class="check" />
<span>
<a href="javascript:;" class="shop-item-img_4"></a>
<a href="javascript:;" class="shop-item_title">前端小白成长记</a>
</span>
<div class="shop-item-price">
<span class="count">￥ <b class="countPrice">396</b></span>
<span class="unitPrice">￥ <b class="unitPrice-money">396</b></span>
<input type="button" value="-" class="subtract"/>
<input type="text" value="1" class="amount" />
<input type="button" value="+" class="add" />
</div>
<span class="shop-item-delete">删除</span>
</div>
</div><!--shop-content结束-->
<!--结算商品金额-->
<div class="shop-accounts">
<span>应付金额：<b>￥</b><b class="shop-accounts-money">1584</b></span>
<a href="javascript:;">去结算</a>
</div>
</aside>
<!--页脚-->
<footer>
<!--页脚导航-->
<div class="footer-content">
<ul>
<a href="javascript:;"><li>网站首页</li></a>
<a href="javascript:;"><li>企业合作</li></a>
<a href="javascript:;"><li>人才招聘</li></a>
<a href="javascript:;"><li>联系我们</li></a>
<a href="javascript:;"><li>讲师招慕</li></a>
<a href="javascript:;"><li>常见问题</li></a>
<a href="javascript:;"><li>意见反馈</li></a>
<a href="javascript:;"><li>慕课大学</li></a>
<a href="javascript:;"><li>友情链接</li></a>
</ul>
<!--关注图标-->
<div class="footer-icon">
<span class="footer-icon-weixin_QRcode hide"></span>
<span class="footer-icon-weixin"></span>
<span class="footer-icon-xinlang"></span>
<span class="footer-icon-qq"></span>
</div>
</div>
<div class="footer-title">Copyrigth @ 2017 imooc.com ALL Rigthis Reserved |京ICP备 13016642号-2</div>
</footer>
</body>
</html>
1 回答
已采纳
橋本奈奈未
TA贡献436条经验 获得超108个赞
好~~~~~~~长。略过。
简单一点的思路就是：声明一个变量来记录总价，给input绑定change事件，在事件回调中加减总价。给按钮绑定点击事件，在事件回调中判断当前点击项是否被选中，是则加减总价。全选按钮也是绑定change事件，遍历列表项做对应的操作。
添加回答
举报
0/150
提交
取消