<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.main {
width: 100%;
border: 2px solid black;
margin: auto;
height: 1000px;
background-color: whitesmoke
}
.top {
height: 100px;
background-color: rgb(219, 210, 210);
border-bottom: 2px solid black;
;
}
.last {
height: 100px;
background-color: rgb(219, 210, 210);
border-bottom: 2px solid black;
;
}
.mid {
height: 200px;
border-bottom: 2px solid black;
}
.allcheck,
.check {
float: left;
margin-left: 40px;
margin-top: 40px;
}
.goods {
margin-left: 20px;
height: 100px;
width: 400px;
float: left;
line-height: 100px;
}
.price {
line-height: 100px;
margin-left: 20px;
height: 100px;
width: 200px;
float: left;
}
.num {
line-height: 100px;
margin-left: 20px;
height: 100px;
width: 300px;
float: left;
}
.add {
line-height: 100px;
margin-left: 20px;
height: 100px;
width: 200px;
float: left;
}
.do {
line-height: 100px;
margin-left: 20px;
width: 100px;
float: left;
}
.a,
.c {
float: left;
height: 30px;
width: 20px;
border: 2px solid black;
line-height: 30px;
text-align: center;
}
.b {
float: left;
outline: none;
border: 2px solid black;
}
.box {
margin-top: 30px;
}
.a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<input class="allcheck" type="checkbox">
<div class="goods">产品</div>
<div class="price">单价</div>
<div class="num">数量</div>
<div class="add">小计</div>
<div class="do">操作</div>
</div>
<div class="mid">
<input class="check" type="checkbox">
<div class="goods">产品:小米手机</div>
<div class="price">29.90</div>
<div class="num">
<div class="box">
<div class="a">-</div>
<input type="text" value="1" class="b" style="height:28px; width: 30px;">
<div class="c">+</div>
</div>
</div>
<div class="add">
<div class="d">29.9</div>
</div>
<div class="do">操作:<a href="javascript:">删除</a></div>
</div>
<div class="mid">
<input class="check" type="checkbox">
<div class="goods">产品:哈哈哇AD</div>
<div class="price">12.60</div>
<div class="num">
<div class="box">
<div class="a">-</div>
<input type="text" value="1" class="b" style="height:28px; width: 30px;">
<div class="c">+</div>
</div>
</div>
<div class="add">
<div class="d"> 12.60</div>
</div>
<div class="do">操作:<a href="javascript:">删除</a></div>
</div>
<div class="mid">
<input class="check" type="checkbox">
<div class="goods">产品:大宝sd蜜</div>
<div class="price">24.80</div>
<div class="num">
<div class="box">
<div class="a">-</div>
<input type="text" value="1" class="b" style="height:28px; width: 30px;">
<div class="c">+</div>
</div>
</div>
<div class="add">
<div class="d">24.80</div>
</div>
<div class="do">操作:<a href="javascript:">删除</a></div>
</div>
<div class="last">
<div class="top">
<input class="allcheck" type="checkbox">
<div class="goods"><a href="javascript:">删除选中的商品</a></div>
<div class="price"><a href="javascript:">删除全部商品</a></div>
<div class="num">已经选择<em>1</em>件商品</div>
<div class="add">总价:<em>0</em></div>
<div class="do">操作</a>
</div>
</div>
</div>
<script>
$(function() {
$(".allcheck").change(function() {
$(".check,.allcheck").prop("checked", $(this).prop("checked"));
if ($(this).prop("checked")) {
$(".mid").css("background", "antiquewhite")
} else {
$(".mid").css("background", "")
}
})
})
// 判断是否全选;
$('.check').change(function() {
if ($(".check:checked").length === $(".check").length) {
$(".allcheck").prop('checked', true);
// console.log($(".check:checked").length);
} else {
$(".allcheck").prop('checked', false);
}
// 根据check判断是否加背景色
if ($(this).prop("checked")) {
$(this).parents(".mid").css("background", "antiquewhite")
} else {
$(this).parents(".mid").css("background", "")
}
})
// 购物车的数量
$(".b").change(function() {
var n = $(this).val();
console.log(n);
var p = $(this).parents(".num").siblings(".price").html()
console.log(p);
$(this).parents('.num').siblings('.add').children('.d').html(parseFloat(n * p).toFixed(2));
getSun();
})
$(".c").click(function() {
var n = $(this).siblings('.b').val();
n++;
$(this).siblings('.b').val(n);
var p = $(this).parents(".num").siblings(".price").html();
$(this).parents('.num').siblings('.add').children('.d').html(parseFloat(n * p).toFixed(2));
getSun();
})
$(".a").click(function() {
var n = $(this).siblings('.b').val();
if (n == 1) {
return false;
}
n--;
$(this).siblings('.b').val(n);
var p = $(this).parents(".num").siblings(".price").html();
console.log(p);
$(this).parents('.num').siblings('.add').html('¥' + parseFloat(n * p).toFixed(2));
getSun();
})
// 修改购物车的总计,总价格;
getSun();
function getSun() {
var count = 0;
var money = 0;
$(".b").each(function(i, ele) {
count += parseFloat($(ele).val());
})
$(".num em").text(count);
$(".d").each(function(i, ele) {
money += parseFloat($(ele).text());
})
$(".add em").text(money.toFixed(2))
}
// 操作:删除
$(".do a").click(function() {
$(this).parents('.mid').remove();
getSun();
})
$('.goods a').click(function() {
$(".check:checked").parents('.mid').remove();
getSun();
})
$('.price a').click(function() {
$('.mid').remove();
getSun()
})
</script>
</body>
</html>
JQuery简单购物车模型
于 2022-05-14 14:56:58 首次发布