jq商城购物车

最新推荐文章于 2022-07-17 19:34:09 发布
最新推荐文章于 2022-07-17 19:34:09 发布
阅读量169 收藏 1
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/-qiang/p/6514193.html
版权
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jquery特效制作复选框,全选,反选,取消,购物车，统计价格，统计，淘宝</title>
  
 <link href="css/index.css" rel="stylesheet" type="text/css" />
  
 <script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
 <script type="text/javascript" src="js/Calculation.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
  
 //jquery特效制作复选框全选反选取消(无插件)
 // 全选
 $(".allselect").click(function () {
 $(".gwc_tb2 input[name=newslist]").each(function () {
 $(this).attr("checked", true);
 // $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
 });
 GetCount();
 });
  
 //反选
 $("#invert").click(function () {
 $(".gwc_tb2 input[name=newslist]").each(function () {
 if ($(this).attr("checked")) {
 $(this).attr("checked", false);
 //$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
 } else {
 $(this).attr("checked", true);
 //$(this).next().css({ "background-color": "#3366cc", "color": "#000000" });
 }
 });
 GetCount();
 });
  
 //取消
 $("#cancel").click(function () {
 $(".gwc_tb2 input[name=newslist]").each(function () {
 $(this).attr("checked", false);
 // $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
 });
 GetCount();
 });
  
 // 所有复选(:checkbox)框点击事件
 $(".gwc_tb2 input[name=newslist]").click(function () {
 if ($(this).attr("checked")) {
 //$(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
 } else {
 // $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
 }
 });
  
 // 输出
 $(".gwc_tb2 input[name=newslist]").click(function () {
 // $("#total2").html() = GetCount($(this));
 GetCount();
 //alert(conts);
 });
 });
 //******************
 function GetCount() {
 var conts = 0;
 var aa = 0;
 $(".gwc_tb2 input[name=newslist]").each(function () {
 if ($(this).attr("checked")) {
 for (var i = 0; i < $(this).length; i++) {
 conts += parseInt($(this).val());
 aa += 1;
 }
 }
 });
 $("#shuliang").text(aa);
 $("#zong1").html((conts).toFixed(2));
 $("#jz1").css("display", "none");
 $("#jz2").css("display", "block");
 }
 </script>
  
  
 </head>
 <body>
  
 <div class="gwc" style=" margin:auto;">
 <table cellpadding="0" cellspacing="0" class="gwc_tb1">
 <tr>
 <td class="tb1_td1"><input id="Checkbox1" type="checkbox" class="allselect"/></td>
 <td class="tb1_td1">全选</td>
 <td class="tb1_td3">商品</td>
 <td class="tb1_td4">商品信息</td>
 <td class="tb1_td5">数量</td>
 <td class="tb1_td6">单价</td>
 <td class="tb1_td7">操作</td>
 </tr>
 </table>
  
 <!---商品加减算总数---->
 <script type="text/javascript">
 $(function () {
 var t = $("#text_box1");
 $("#add1").click(function () {
 t.val(parseInt(t.val()) + 1)
 setTotal(); GetCount();
 })
 $("#min1").click(function () {
 t.val(parseInt(t.val()) - 1)
 setTotal(); GetCount();
 })
 function setTotal() {
  
 $("#total1").html((parseInt(t.val()) * 9).toFixed(2));
 $("#newslist-1").val(parseInt(t.val()) * 9);
 }
 setTotal();
 })
 </script>
  
 <table cellpadding="0" cellspacing="0" class="gwc_tb2">
 <tr>
 <td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
 <td class="tb2_td2"><a href="#"><img src="images/img1.jpg"/></a></td>
 <td class="tb2_td3"><a href="#">产品标题</a></td>
 <td class="tb1_td4">一件</td>
 <td class="tb1_td5">
 <input id="min1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
 <input id="text_box1" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
 <input id="add1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
 </td>
 <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
 <td class="tb1_td7"><a href="#">删除</a></td>
 </tr>
 </table>
  
 <!---商品加减算总数---->
 <script type="text/javascript">
 $(function () {
 var t = $("#text_box2");
 $("#add2").click(function () {
 t.val(parseInt(t.val()) + 1)
 setTotal(); GetCount();
 })
 $("#min2").click(function () {
 t.val(parseInt(t.val()) - 1)
 setTotal(); GetCount();
 })
 function setTotal() {
  
 $("#total2").html((parseInt(t.val()) * 8).toFixed(2));
 $("#newslist-2").val(parseInt(t.val()) * 8);
 }
 setTotal();
 })
 </script>
 <table cellpadding="0" cellspacing="0" class="gwc_tb2">
 <tr>
 <td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>
 <td class="tb2_td2"><a href="#"><img src="images/img2.jpg"/></a></td>
 <td class="tb2_td3"><a href="#">产品标题</a></td>
 <td class="tb1_td4">一件</td>
 <td class="tb1_td5">
 <input id="min2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
 <input id="text_box2" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
 <input id="add2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
 </td>
 <td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
 <td class="tb1_td7"><a href="#">删除</a></td>
 </tr>
 </table>
  
 <!---总数---->
 <script type="text/javascript">
 $(function () {
 $(".quanxun").click(function () {
 setTotal();
 //alert($(lens[0]).text());
 });
 function setTotal() {
 var len = $(".tot");
 var num = 0;
 for (var i = 0; i < len.length; i++) {
 num = parseInt(num) + parseInt($(len[i]).text());
  
 }
 //alert(len.length);
 $("#zong1").text(parseInt(num).toFixed(2));
 $("#shuliang").text(len.length);
 }
 //setTotal();
 })
 </script>
 <table cellpadding="0" cellspacing="0" class="gwc_tb3">
 <tr>
 <td class="tb1_td1"><input id="checkAll" class="allselect" type="checkbox" /></td>
 <td class="tb1_td1">全选</td>
 <td class="tb3_td1">
 <input id="invert" type="checkbox" />反选
 <input id="cancel" type="checkbox" />取消
 </td>
 <td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
 <td class="tb3_td3">合计(不含运费):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></span></td>
 <td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;" class="jz2" id="jz2">结算</a></td>
 </tr>
 </table>
  
 </div>
  
 </body>
 </html>
  

转载于:https://www.cnblogs.com/-qiang/p/6514193.html

weixin_33830216
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQ写的购物车简单功能
wyl_1234567_Q的博客
09-20 275
功能有全选、单选、选择删除、清空购物车、删除商品、点击加号商品数量++、点击减号商品数量--、商品数量和总价
基于jq的购物车-移动端购物车
01-08
基于jq的移动端购物车，单条商品选择，全选，单个商品增加与减少同时总金额同步改变，删除单个商品等
JS&JQ添加购物车功能
qq_50822277的博客
12-30 3864
啥也不说。直接上代码！！！！ 第一步。引入script src=“jquery-3.3.1.min.js” 第二步。先写一个$ (function() {})函数。这里要说一下。这个$(function() {})是最大的函数。包住全部。下面的图片是加入购物车。再下面是分部 下面这些才是函数里面的东西、 添加购物车！！！！ 第三步。先找到加入购物车的a标签。然后分别找到a标签父亲的兄弟的文本——图片、商品名称、折扣价 //获取购物车标签#goods tr td a $('#go.
Jquery 实现购物车
分享我的点点滴滴，在成长路上与你同行！
09-23 3319
购物车需求： 1、 当全选选中时，所有商品的小复选框的选中状态跟按下的全选按钮保持一致； 2、 当选中商品时，添加背景颜色；如果所有商品都被选中，就让全选按钮为选中状态； 3、 可以点击 +或 - 来增加或减少商品数量，也可以直接在文本框修改数量，数量修改之后的小计也会相应改变； 4、 可以进行删除单个商品、和选中商品以及清空购物车； 5、 进行操作时，下面的已选商品件数以及总额也会有相应变化； 默认： 全选和改变数量效果 删除选中的商品 删除之后的效果 JS...
案例：购物车 商品加减号
青衣的博客
09-02 554
<div class="c-container"> <div class="w"> <div class="cart-warp"> <!-- 头部全选模块 --> <div class="cart-thead"> <div class="t-checkbox"> <input type=.
jq购物车案例
MscdnTjc的博客
08-05 1019
文章目录 前言 购物车案例操作步骤 1.画页面 2.设置css样式 3.引入jq文件 4.设置jq样式 总结 前言 提示：在逛淘宝，京东网站中，我们会见到很多的购物车项目，接下来我就通过jq代码来实现一个简单的购物车案列。 提示：以下是本篇文章正文内容，下面案例可供参考 操作步骤 1.先画出简单的页面 页面样式 <table> <thead> <tr> .
jq产品飞入购物车特效
11-02
jq产品飞入购物车特效 jq产品飞入购物车特效 jq产品飞入购物车特效
jq实现购物车的思路和方法（看一遍以后都会懂）
06-17
主要实现参照淘宝购物车功能，有开发思路以及源码，帮助新手同学快速掌握购物车或者jq语法
JQ实现购物车.zip
12-09
写了好几篇的，京东购物车的实现；也还是那简简单单的样子，这里有一份对我而言还不错的，页面实现；希望可以帮到你；
基于js与jq实现淘宝加入购物车的特效和计算购物车的总金额
07-15
基于js与jq实现淘宝加入购物车的特效和计算购物车的总金额
js jquery 商城分类目录
11-10
js jquery 商城分类目录
购物车前端开发（jQuery和bootstrap3）
11-23
作为一名不在软件公司工作的软件工程师，不仅要会写后台代码(PHP/JAVA/SQL…)，还是兼顾前端工程师的工作(html/javascript/css…)。下面就来分享一个在实际工作项目中使用到的购物车的前端开发。 这里分享的仅仅是针对购物车的操作(产品数量的增加减少，删除购物车中产品项)，假设购物车中已经放有若干产品。闲话少说，先上两张效果图。 HTML代码如下：这里使用到了JQuery1.11和bootstrap3 。 &lt;!DOCTYPE html> &lt;html&gt; <HEADER> &lt;meta charset="UTF-8"&gt; &lt;title&gt;Shopping Cart&lt;/titl
jquery实现购物商城
12-21
可以很好的了解jsp，学习的好资料
jquery实现的漂亮商城
10-17
类似于一个小商城。主要用到jquery的方法。实现新闻的向上滚动，图片的切换，图片的局部放大，移动到上面tips的实现。是学习html的java脚本、css样式表、jquery的绝佳例子。更有可能是你建站的基础。jquery商城。
基于jQuery的在线商城设计与实现
小宝的博客
12-30 8006
#1 网站需求分析 1.1 主体说明 该网页包括了十一个页面，具体如下： Index.html（首页）、reg.html（注册页面）、login.html(登录页面)、about.html(关于页面)、info.html(提交订单信息)、member.html(个人信息)、message.html（留言页面）、payply.html(付款页面)、shopcar.html(购物车页面)、Product.html(商品列表页)、pwd.html(管理密码页面)， 图1.1 网页HTML文件 网站中Css文件夹为
jQuery实现简易商城系统项目实操详解
Free雅轩的博客
07-17 847
全选
jquery之购物商城
Hu_LSS的博客
03-03 1063
jquery之购物商城 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width"> <meta http-equiv="X-UA-Compatible" cont
jq实现购物网站顶部广告自动弹出收回效果
li3196672779的博客
06-16 393
*{ margin: 0px; padding: 0px; } .box{ width: 1200px; margin: 0px auto; border: 2px solid red; } .top{ height: 400px; background: yellow; } .list{ heig
简单购物车
q592654815的博客
10-12 148
#定义一个嵌套列表 product_list = [('mac',9000), ('bike',2000), ('book',100), ('tasila',900000) ] #定义购物车 shopping_card = [] shopping_card2 = ...
jq编写购物车
最新发布
05-30
你可以使用 jq 编写一个简单的购物车程序来处理用户的购买请求。以下是一个可能的实现： ```bash # 商品列表，格式为 JSON 数组 products='[ {"name": "apple", "price": 2.5, "quantity": 10}, {"name": "banana...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值