https://www.cnblogs.com/sandraryan/
jq實現購物車功能
點擊+- 增減數量，計算價格；
點擊刪除，刪除當前行（商品）
點擊- ，減到0 詢問是否刪除商品
點擊全選 計算總價（商品只有被選中才能計算總價）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div,
ul,
li {
margin: 0;
padding: 0;
}
#wrap {
width: 782px;
box-shadow: 0 0 10px lightblue;
margin: 100px auto;
text-align: center;
}
li {
font-size: 20px;
color: gray;
width: 100px;
height: 24px;
line-height: 30px;
list-style: none;
border: 1px solid lightgray;
float: left;
padding: 10px;
}
ul {
height: 46px;
display: block;
margin: 0 auto;
clear: both;
background-color: rgb(212, 241, 250);
}
.num {
width: 150px;
}
.num input {
width: 30px;
text-align: center;
}
.total {
clear: both;
text-align: right;
padding: 10px;
font-size: 20px;
color: red;
}
ul span {
border: 1px solid lightgray;
padding: 2px 10px;
border-radius: 5px;
/* background-color: lightgray; */
color: gray;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li><input name='all' type='checkbox'>all</li>
<li>name</li>
<li>price</li>
<li class="num">number</li>
<li>add</li>
<li>operation</li>
</ul>
<ul>
<li><input type="checkbox" name='one'>one</li>
<li>phone</li>
<li>1000.00</li>
<li class='num'>
<input type="button" value='-'>
<input type="text" name='num' value="1">
<input type="button" value='+'>
</li>
<li class="price">1000.00</li>
<li><span>delete</span></li>
</ul>
<ul>
<li><input type="checkbox" name='one'>one</li>
<li>phone</li>
<li>1000.00</li>
<li class='num'>
<input type="button" value='-'>
<input type="text" name='num' value="1">
<input type="button" value='+'>
</li>
<li class="price">1000.00</li>
<li><span>delete</span></li>
</ul>
<ul>
<li><input type="checkbox" name='one'>one</li>
<li>phone</li>
<li>1000.00</li>
<li class='num'>
<input type="button" value='-'>
<input type="text" name='num' value="1">
<input type="button" value='+'>
</li>
<li class="price">1000.00</li>
<li><span>delete</span></li>
</ul>
<div class="total">total: <span> 0.00 </span></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// 計算總價的函數
function calcTotal() {
// 設置總價初始值
var total = 0;
// 獲取所有name為one的input框
var allOne = $('input[name = "one"]');
// 獲取單價
var price = $('.price');
// name為one的input框，如果被選中了，計算總價
allOne.each(function () {
if ($(this).prop('checked')) {
// 獲取當前索引
var i = allOne.index($(this));
// eq()返回帶有被選元素的索引
total += parseFloat(price.eq(i).text());
}
});
// 總價的值寫在頁面上
$('.total span').text(total);
}
$(function () {
// 獲取ul里面的span（刪除鍵），注冊點擊事件
$('ul span').click(function () {
// 彈出輸入框，如果用戶點擊了確認，返回true
if (confirm('you delete your mother ne????')) {
// 刪除當前刪除鍵坐在的ul行
$(this).parent().parent().closest('ul').remove();
// 否則。（用戶點擊取消）什么都不做
} else {}
// 如果被選中了，改變總價，調用計算總價的函數
// 計算總價
calcTotal();
});
// 找到input 的name是num的元素，當內容改變時
$('input[name = "num"]').change(function () {
// 獲取值並轉換為浮點數（數量）
var val = parseFloat($(this).val());
// 如果值大於0，其父級的下一個兄弟的文本變成：當前值*當前值的父級的上一個元素值的浮點數
// 即 數量 * 單價
if (val > 0) {
// 吧單價的值獲取並轉為浮點型 * 單價（當前元素的父級的下一個元素）
$(this).parent().next().text(val * parseFloat($(this).parent().prev().text()));
// 如果當前值為0 ，刪除按鈕trigger 觸發click事件
} else if (val == 0) {
// 由於input[val = '-']獲取的是集合，三個全都刪掉了。在這里添加判斷，如果值為0，當前行執行delete點擊事件函數
if (confirm('you delete your mother ne????')) {
$(this).parent().parent().closest('ul').remove();
} else {}
calcTotal();
// $(this).parent().parent().remove(); //直接刪除
} else {
//默認1
$(this).val(1);
}
calcTotal();
});
// - 按鈕
// 獲取減號，注冊點擊事件
$('input[value = "-"]').click(function () {
// - 的下一個的值（數字）-1 轉為整形，設為-下一個元素（數字）的值
//就是點擊- 吧數字的值--
$(this).next().val(parseInt($(this).next().val()) - 1);
// 數字值trigger change事件
$('input[name = "num"]').trigger('change');
});
// + 同理
$('input[value = "+"]').click(function () {
$(this).prev().val(parseInt($(this).prev().val()) + 1);
$('input[name = "num"]').trigger('change');
});
// 選擇框 選中一個框就執行一次計算價格的函數
$('input[name = "one"]').click(function () {
calcTotal();
});
// 當選中全選框時候，操作全選或者反選
$('input[name = "all"]').click(function () {
// prop方法設置或返回備選元素的屬性和值
// 當前元素（頂部復選框）被選中時（checked時）
var ret = $(this).prop('checked');
console.log(ret);
// 每一個單選框都添加checked屬性
$('input[name="one"]').each(function () {
$(this).prop('checked', ret);
});
calcTotal();
});
});
</script>
</body>
</html>
布局就這樣了~~~