<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 1000px;
margin: 100px auto;
}
.btn-group {
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
}
ul {
list-style: none;
}
ul li {
overflow: hidden;
border-bottom: 1px solid #ddd;
padding: 30px 0;
font-size: 0;
}
ul li > p {
display: inline-block;
width: 25%;
font-size: 14px;
text-align: center;
}
input[type='text'] {
width: 50px;
text-align: center;
}
.pro-name {
text-align: left;
}
.title {
font-size: 0
}
.title span {
display: inline-block;
width: 25%;
text-align: center;
font-size: 14px;
}
.increase,
.reduce {
cursor: pointer;
}
.remove,
.clear-all {
text-decoration: none;
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 5px;
color: #999;
float: right;
}
.clear-all {
float: none;
color: #000;
cursor: pointer;
}
</style>
</head>
<body>
<p class="wrapper">
<p class="btn-group">
<label>
<input type="radio" name="check" id="checkAll"> 全选
<input type="radio" name="check" id="checkNone"> 全不选
<input type="radio" name="check" id="reverse"> 反选
<span class="clear-all">clearAll</span>
</label>
</p>
<ul>
<li class="title">
<span style="text-align: left;text-indent: 20px">商品名称</span>
<span>数量</span>
<span>单价</span>
<span>总价</span>
</li>
<li class="item">
<p class="pro-name">
<input type="checkbox">
<span>雀巢咖啡</span>
</p>
<p class="quantity">
<span class="reduce">-</span>
<input type="text" name="qty" id="qty" value="10">
<span class="increase">+</span>
</p>
<p class="unit-price">
<input type="text" value="12.5" disabled="true">
</p>
<p class="total-price">
<label>￥</label>
<span></span>
<a href="javascript:;" class="remove">删除</a>
</p>
</li>
<li class="item">
<p class="pro-name">
<input type="checkbox">
<span>JavaScript权威指南</span>
</p>
<p class="quantity">
<span class="reduce">-</span>
<input type="text" name="qty" id="qty" value="1">
<span class="increase">+</span>
</p>
<p class="unit-price">
<input type="text" value="98" disabled="true">
</p>
<p class="total-price">
<label>￥</label>
<span></span>
<a href="javascript:;" class="remove">删除</a>
</p>
</li>
<li class="item">
<p class="pro-name">
<input type="checkbox">
<span>马克杯</span>
</p>
<p class="quantity">
<span class="reduce">-</span>
<input type="text" name="qty" id="qty" value="5">
<span class="increase">+</span>
</p>
<p class="unit-price">
<input type="text" value="18.98" disabled="true">
</p>
<p class="total-price">
<label>￥</label>
<span></span>
<a href="javascript:;" class="remove">删除</a>
</p>
</li>
<p class="amount" style="margin-top: 50px;text-align: right">￥<span></span></p>
</ul>
</p>
<script src="js/jquery.js"></script>
<script>
var checkbox = $('.pro-name').find('input'),
priceSpan = $('.amount').find('span'),
qtyInput = $('.quantity').find('input'),
totalAmount = 0;
//total price
function sum() {
checkbox = $(document).find('.pro-name').find('input');
var toFixed = 0
for (var i = 0; i < checkbox.length; i++) {
var _this = $(checkbox[i]);
var qauntity = _this.parent().siblings('.quantity').find('input').val();
var unitPrice = _this.parent().siblings('.unit-price').find('input').val();
var curSinglePrice = _this.parent().siblings('.total-price').find('span');
curSinglePrice.text(Number(qauntity) * Number(unitPrice));
if (checkbox[i].checked) {
totalAmount += Number(qauntity) * Number(unitPrice);
toFixed = totalAmount.toFixed(2);
toFixed = toFixed <= 0 ? 0 : toFixed;
priceSpan.text(toFixed);
} else {
priceSpan.text(toFixed);
}
}
}
sum();
// Increase button
$('.increase').click(function() {
totalAmount = 0;
var _this = $(this);
var input = _this.siblings('input');
var currNumber = _this.siblings('input').val();
currNumber++;
_this.siblings('input').val(currNumber);
sum();
})
// Decrease button
$('.reduce').click(function() {
totalAmount = 0;
var _this = $(this);
var input = _this.siblings('input');
var currNumber = _this.siblings('input').val();
currNumber = currNumber-- <= 1 ? 1 : currNumber--;
_this.siblings('input').val(currNumber);
sum();
})
//input value change will change its single total price
qtyInput.each(function() {
var _this = $(this);
totalAmount = 0;
sum();
_this.change(function() {
totalAmount = 0;
sum();
})
})
//select all
$('#checkAll').click(function() {
totalAmount = 0;
checkbox.prop('checked', true);
sum();
})
//select none
$('#checkNone').click(function() {
totalAmount = 0;
checkbox.prop('checked', false);
sum();
})
//reverse
$('#reverse').click(function() {
totalAmount = 0;
checkbox.each(function() {
$(this).prop('checked', !this.checked);
})
sum();
})
//remove item
$('.remove').click(function() {
$(this).parents('li').remove();
totalAmount = 0;
sum();
if ($('ul').children('.item').size() <= 0) {
$('.wrapper').remove();
$('body').append('your cart is empty!').css('text-align', 'center');
}
})
//clear out cart
$('.clear-all').click(function() {
$('.wrapper').remove();
$('body').append('your cart is empty!').css('text-align', 'center');
})
checkbox.click(function() {
var length=0;
totalAmount = 0;
sum();
checkbox.each(function(){
if(this.checked){
length++;
}
//如果按钮没全被选中，取消全选按钮的选中状态
if(length < checkbox.length){
$('#checkAll').prop('checked', false);
}else{
$('#checkAll').prop('checked', true);
}
})
})
</script>
</body>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://github.com/vuejs/vuex/tree/master/examples/shopping-cart