1 创建静态页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 600px;
margin: 100px auto;
}
a {
text-decoration: none;
}
.heard,
.foot {
width: 600px;
height: 50px;
background-color: #cccccc;
}
.center {
height: 210px;
}
.c1 {
width: 600px;
height: 70px;
}
.heard div,
.foot div,
.c1 div {
float: left;
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
}
.c1 div {
margin: 10px 0;
}
.in1 {
float: left;
outline: none;
width: 30px;
height: 20px;
text-align: center;
}
.jian,
.jia {
display: block;
float: left;
width: 10px;
height: 20px;
line-height: 22px;
border: 1px solid #cccccc;
}
.center .ji .jishu {
margin-left: 20px;
}
.he {
color: red;
}
.zongjian {
color: red;
}
.bg {
background-color: pink;
opacity: .5;
}
</style>
</head>
<body>
<div class="box">
<div class="heard">
<div><input type="checkbox" name="" class="cheakall" value="">全选</div>
<div>单价</div>
<div>数量</div>
<div>小计</div>
<div>操作</div>
</div>
<div class="center">
<div class="c1">
<div class="c"><input type="checkbox" name="" class="cheak" value="">全选</div>
<div class="danjia">￥12.50</div>
<div class="ji">
<div class="jishu">
<a href="javascript:;" class="jian">-</a><input type="text" class="in1" value="1"><a
href="javascript:;" class="jia">+</a>
</div>
</div>
<div class="z"><span class="zongjia">￥12.50</span></div>
<div><a href="javascript:;" class="del">删除</a></div>
</div>
<div class="c1">
<div class="c"><input type="checkbox" name="" class="cheak" value="">全选</div>
<div class="danjia">￥22.50</div>
<div class="ji">
<div class="jishu">
<a href="javascript:;" class="jian">-</a><input type="text" class="in1" value="1"><a
href="javascript:;" class="jia">+</a>
</div>
</div>
<div class="z"><span class="zongjia">￥22.50</span></div>
<div><a href="javascript:;" class="del">删除</a></div>
</div>
<div class="c1">
<div class="c"><input type="checkbox" name="" class="cheak" value="">全选</div>
<div class="danjia">￥32.50</div>
<div class="ji">
<div class="jishu">
<a href="javascript:;" class="jian">-</a>
<input type="text" class="in1" value="1">
<a href="javascript:;" class="jia">+</a>
</div>
</div>
<div class="z"><span class="zongjia">￥32.50</span></div>
<div><a href="javascript:;" class="del">删除</a></div>
</div>
</div>
<div class="foot">
<div><input type="checkbox" name="" class="cheakall" value="">全选</div>
<div><a href="javascript:;" class="delall">删除选中的商品</a></div>
<div><a href="javascript:;" class="qing">清理购物车</a></div>
<div>已经选择<span class="zongjian"> </span>商品</div>
<div>总价:<span class="he"></span></div>
</div>
</div>
</body>
//记得导入jQuery文件
<script src="./jquery.min.js"></script>
<script src="./js.js"></script>
</html>
2 js里
$(function () {
// 1 进行全选按钮
$('.cheakall').change(function () {
//获取属性值 利用prop()一个值是获取值 两个值是设置
$('.cheak,.cheakall').prop('checked', $(this).prop("checked"));
getSum()
})
// 2 开始反选
$('.cheak').change(function () {
//判断 假如点击checked 的长度 等于cheak的长度 就都选中
if ($('.cheak:checked').length == $('.cheak').length) {
$('.cheakall').prop('checked', true)
}
else {
$('.cheakall').prop('checked', false)
}
//给选中的模块添加背景颜色
if ($(this).prop("checked")) {
$(this).parents('.c1').addClass('bg')
}
else {
$(this).parents('.c1').removeClass('bg')
}
// if ($(this).prop("checked")) {
// $(this).parents('.c1').toggleClass('bg')
// }
getSum()
})
//3 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
$('.jia').click(function () {
var a = $(this).siblings('.in1').val();
a++;
$(this).siblings('.in1').val(a)
//然后计算金额
var p = $(this).parents('.ji').siblings('.danjia').html()
// console.log(p);
p = p.substr(1);
// console.log(p);
$(this).parents('.ji').siblings().find('.zongjia').html('￥' + (p * a).toFixed(2))
getSum()
})
// 4 相减也是如此
$('.jian').click(function () {
var a = $(this).siblings('.in1').val();
if (a == 1) {
return false;
}
a--;
$(this).siblings('.in1').val(a);
//然后计算金额
var p = $(this).parents('.ji').siblings('.danjia').html()
// console.log(p);
p = p.substr(1);
// console.log(p);
$(this).parents('.ji').siblings().find('.zongjia').html('￥' + (p * a).toFixed(2))
getSum()
})
//用户修改文本框的值
$('.in1').change(function () {
var n = $(this).val();
var p = $(this).parents('.ji').siblings('.danjia').html()
// console.log(p);
p = p.substr(1);
// console.log(p);
$(this).parents('.ji').siblings().find('.zongjia').html('￥' + (p * n).toFixed(2))
getSum()
})
//计算总计金额和数量
getSum()
function getSum() {
var count = 0;//计算总件数
var money = 0;//计算总金额
// $('.in1').each(function (index, el) {
// count += parseInt($(el).val())
// })
$('.cheak:checked').each(function (index, ele) {
money += parseFloat($(ele).parents('.c').siblings('.z').find('.zongjia').text().substr(1))
// console.log(money);
count += parseInt($(ele).parents('.c').siblings('.ji').find('.in1').val());
// console.log(count);
})
$('.zongjian').text(count)
// $('.zongjia').each(function (index, el) {
// money += parseFloat($(el).text().substr(1))
// })
$('.he').text('￥' + money.toFixed(2))
}
// 删除
$('.del').click(function () {
$(this).parent().parent().remove();
getSum()
})
$('.delall').click(function () {
$(".cheak:checked").parents('.c1').remove();
getSum()
})
$('.qing').click(function () {
$(".c1").empty();
getSum()
})
})
