|
全選
|
序號 |
商品名稱 |
數(shù)量 |
單價 |
小計 |
操作 |
|
|
1
烤煎餅 |
1
|
單價：
2
|
小計：
2
|
刪除
|
|
|
2
珍珠奶茶 |
1
|
單價：
4
|
小計：
4
|
刪除
|
|
|
3
水煮魚 |
1
|
單價：
20
|
小計：
20
|
刪除
|
|
|
4
蛋糕 |
1
|
單價：
50
|
小計：
50
|
刪除
|
|
|
5
土豆片 |
1
|
單價：
5
|
小計：
5
|
刪除
|
|
|
6
蛋黃派 |
1
|
單價：
5.5
|
小計：
5.5
|
刪除
|
商品一共
0 件; 共計花費
0 元; 其中最貴的商品單價是
0 元
2.css代碼：
table {
width: 1000px;
/* height: 300px; */
border-collapse: collapse;
table-layout: fixed;
text-align: center;
font-size: 18px;
margin: 0 auto;
}
a {
text-decoration: none;
color: black;
}
tr {
height: 50px;
}
.check {
width: 20px;
height: 20px;
}
.checkOnly {
width: 20px;
height: 20px;
}
.empty {
font-size: 25px;
position: fixed;
top: 45%;
left: 45%;
display: none;
}
.empty a {
color: pink;
}
.empty a:hover {
text-decoration: underline;
}
3.js代碼：
//引入jquery
//引入封裝好的全選反選插件
補充上面js代碼中用到的全選反選插件 \color{red}{補充上面js代碼中用到的全選反選插件}補充上面js代碼中用到的全選反選插件
//1、定義全選的插件
jQuery.fn.extend({
bindCheck:function($subCheckBox,$btnUncheck){
let $allCheckBox = this;
//1、給全選復選框綁定click事件
//this:是全選復選框（jQuery對象）
this.click(function(){
let isChecked = this.checked;
$subCheckBox.each(function(){
this.checked = isChecked;
});
});
//2、給反選
if(arguments.length==2){
$btnUncheck.click(function(){
$subCheckBox.each(function(){
this.checked = !this.checked;
});
reversCheck();
});
}
//3、給每個選擇項的復選框綁定事件
$subCheckBox.click(function(){
reversCheck();
});
function reversCheck(){
//1、判斷是否全部的復選框被選中
let isAllChecked = true;
$subCheckBox.each(function(){
if(!this.checked){
isAllChecked = false;
}
});
//2、處理全選復選框
$allCheckBox.attr("checked",isAllChecked);
}
}
});以上就是使用jquery怎么實現(xiàn)一個購物車功能，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文名稱：使用jquery怎么實現(xiàn)一個購物車功能
當前地址：http://weahome.cn/article/jjoigi.html
重慶分公司
重慶分公司
