微客导航 » 文章资讯 » jquery实现购物车基本功能

jquery实现购物车基本功能

2023-08-10 09:06:03 341

购物车里的功能无非是商品数量的加减、商品删除、全选反选等操作，其实现过程如下所示：

1.html代码：



购物车空空如也，快去选购吧

全选序号商品名称数量单价小计操作 1 烤煎饼

单价： 2 小计： 2 删除 2 珍珠奶茶

单价： 4 小计： 4 删除 3 水煮鱼

单价： 20 小计： 20 删除 4 蛋糕

单价： 50 小计： 50 删除 5 土豆片

单价： 5 小计： 5 删除 6 蛋黄派

单价： 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:0auto;
}

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;
}

.emptya{
color:pink;
}

.emptya: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(){
letisChecked=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();
});
functionreversCheck(){
//1、判断是否全部的复选框被选中
letisAllChecked=true;
$subCheckBox.each(function(){
if(!this.checked){
isAllChecked=false;
}
});
//2、处理全选复选框
$allCheckBox.attr("checked",isAllChecked);
}
}
});

效果如下图所示：

以上就是一个功能比较完整的购物车，有问题或者建议欢迎指出。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jquery实现购物车基本功能

热门推荐

随机推荐