用纯js或jquery+html做类似于淘宝购物车的复选框选择效果，如图

qq_23179669 2015-01-12 04:17:36 



<!DOCTYPE html>

<html>

  <head>

	<meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="css/style.css" />

	<script type="text/javascript" src="js/jquery.1.8.2.min.js"></script>

	<script type="text/javascript">

		function allSelect() {

            if ($(":checkbox").attr("checked") != "checked") {

                $(":checkbox").attr("checked", "checked");

            }else {

                $(":checkbox").removeAttr("checked");

            }

        }

    </script>

  </head>

  

  <body>

   <div data-role="page">

		<header class="header_search">

			<h4>购物车</h4>

		</header>

       	<section class="gwc_section">

            <div class="gwc_con_txt">

                <div class="dianpu_name"><input type="checkbox" /> 某某专卖店</div>

                <div class="cplistdiv cp_list1">

                    <table width="100%" cellpadding="0" cellspacing="0">

                    	<!-- 产品信息 -->

                        <tr>

                            <td colspan="2" class="cp_img_td"><img src="img/chanpin/cpimg_05.png"/></td>

                            <td colspan="4" align="left">2014秋季新款女装连衣裙气质修身连衣裙短裙</td>

                        </tr>

                        <tr class="cp_num_tr">

                        	<td></td>

                            <td><input type="checkbox"/></td>

                            <td><span class="txtred">￥20.00</span></td>

                            <td>x1</td>

                            <td><div class="cpsx_info_num"><a class="num_jian" > </a><input type="number" class="goumaishuliang" value="1"/><a class="num_jia"> </a></div></td>

                            <td class="delgg_td"><a href="#"><img src="img/icons/del_icon.png"/></a></td>

                        </tr>

                        <tr class="cp_num_tr">

                        	<td></td>

                            <td><input type="checkbox"/></td>

                            <td><span class="txtred">￥360.00</span></td>

                            <td>x20</td>

                            <td><div class="cpsx_info_num"><a class="num_jian" > </a><input type="number" class="goumaishuliang" value="20"/><a class="num_jia"> </a></div></td>

                            <td class="delgg_td"><a href="#"><img src="img/icons/del_icon.png"/></a></td>

                        </tr>

                    </table>

                </div>

            </div>

            <div class="gwc_con_txt">

            	<div class="dianpu_name"><input type="checkbox"/> 某某专卖店</div>

                <div class="cplistdiv cp_list2">

                	<table width="100%" cellpadding="0" cellspacing="0">

                    	<!-- 产品信息 -->

                        <tr>

                            <td colspan="2" class="cp_img_td"><img src="img/chanpin/cpimg_05.png"/></td>

                            <td colspan="4" align="left">2014秋季新款女装连衣裙气质修身连衣裙短裙</td>

                        </tr>

                        <tr class="cp_num_tr">

                        	<td></td>

                            <td><input type="checkbox"/></td>

                            <td><span class="txtred">￥20.00</span></td>

                            <td>x1</td>

                            <td><div class="cpsx_info_num"><a class="num_jian" > </a><input type="number" class="goumaishuliang" value="1"/><a class="num_jia"> </a></div></td>

                            <td class="delgg_td"><a href="#"><img src="img/icons/del_icon.png"/></a></td>

                        </tr>

                        <!-- 产品信息 -->

                        <tr>

                            <td colspan="2" class="cp_img_td"><img src="img/chanpin/cpimg_06.png"/></td>

                            <td colspan="4" align="left">2014秋季新款女装连衣裙气质修身连衣裙短裙</td>

                        </tr>

                        <tr class="cp_num_tr">

                        	<td></td>

                            <td><input type="checkbox"/></td>

                            <td><span class="txtred">￥50.00</span></td>

                            <td>x1</td>

                            <td><div class="cpsx_info_num"><a class="num_jian" > </a><input type="number" class="goumaishuliang" value="1"/><a class="num_jia"> </a></div></td>

                            <td class="delgg_td"><a href="#"><img src="img/icons/del_icon.png"/></a></td>

                        </tr>

                    </table>

                </div>

            </div>

            

            <div class="gwc_con_txt">

            	<div class="dianpu_name"><input type="checkbox"/> 某某专卖店</div>

                <div class="cplistdiv cp_list2">

                	<table width="100%" cellpadding="0" cellspacing="0">

                    	<!-- 产品信息 -->

                        <tr>

                            <td colspan="2" class="cp_img_td"><img src="img/chanpin/cpimg_09.png"/></td>

                            <td colspan="4" align="left">家具厂家供应批发淘宝热销皮床软体床双人床</td>

                        </tr>

                        <tr class="cp_num_tr">

                        	<td></td>

                            <td><input type="checkbox"/></td>

                            <td><span class="txtred">￥700.00</span></td>

                            <td>x1</td>

                            <td><div class="cpsx_info_num"><a class="num_jian" > </a><input type="number" class="goumaishuliang" value="1"/><a class="num_jia"> </a></div></td>

                            <td class="delgg_td"><a href="#"><img src="img/icons/del_icon.png"/></a></td>

                        </tr>

                        <!-- 同一件商品不同规格 2 -->

                        <tr class="cp_tit_tr">

                            <td></td>

                            <td width="30"></td>

                            <td colspan="2" width="160"><span class="txtgray">规格：</span>红色1.8</td>

                            <td colspan="2" align="right" width="150"><span class="txtgray">￥1200.00</span> </td>

                        </tr>

                        <tr class="cp_num_tr">

                        	<td></td>

                            <td><input type="checkbox"/></td>

                            <td><span class="txtred">￥1200.00</span></td>

                            <td>x1</td>

                            <td><div class="cpsx_info_num"><a class="num_jian" > </a><input type="number" class="goumaishuliang" value="1"/><a class="num_jia"> </a></div></td>

                            <td class="delgg_td"><a href="#"><img src="img/icons/del_icon.png"/></a></td>

                        </tr>

                    </table>

                </div>

            </div>

       	</section>

        <footer class="gwc_footer">

        	<table width="100%" cellpadding="0" cellspacing="0">

            	<tr>

                	<td><input type="checkbox" onclick="allSelect();"/> 全选</td>

                    <td align="right">

                    	<p>总计：<span class="txtred">￥2350.00</span></p>

                        <p class="txtfont12">不含运费：￥0.00</p>

                    </td>

                    <td align="right" width="90"><a href="#">结算</a></td>

                </tr>

            </table>

        </footer>

   </div>

  </body>

</html>





/*购物车*/

.gwc_section .gwc_con_txt{background:#fff; margin-bottom:5px;border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; font-size:14px;}

.gwc_section .gwc_con_txt .dianpu_name{line-height:40px;padding:0px 10px;border-bottom:1px solid #e5e5e5; font-size:16px; font-weight:bold;}

.gwc_section .gwc_con_txt .cpsx_info_num{width:100px;border:1px solid #e5e5e5;margin:0px auto;}

.gwc_section .gwc_con_txt .cpsx_info_num a{display:inline-block;padding:8px 13px;text-align:center;cursor:pointer;color:rgba(255,255,255,0);}

.gwc_section .gwc_con_txt .cpsx_info_num .num_jian{border-right:1px solid #e5e5e5;background:url(../img/icons/iconfont-jian.png) no-repeat center center;}

.gwc_section .gwc_con_txt .cpsx_info_num .num_jia{border-left:1px solid #e5e5e5;background:url(../img/icons/iconfont-jia.png) no-repeat center center;}

.gwc_section .gwc_con_txt .cpsx_info_num .goumaishuliang{width:35px;height:20px;text-align:center;border:0px solid #e5e5e5;font-size:12px;outline:none;}



.gwc_section .gwc_con_txt .cp_tit_tr td{padding:5px 0px;}

.gwc_section .gwc_con_txt .cp_num_tr td{padding-bottom:5px;border-bottom:1px solid #e5e5e5;}

.gwc_section .gwc_con_txt .cp_num_tr .delgg_td{width:35px;}

.gwc_section .gwc_con_txt .cp_num_tr .delgg_td img{width:20px;}

.gwc_section .gwc_con_txt .heji_tr td{height:30px;}

.gwc_section .gwc_con_txt .cp_img_td{padding:5px;}

.gwc_section .gwc_con_txt .cp_img_td img{width:60px;}

.gwc_section .gwc_con_txt table{padding:5px; text-align:center;}



.gwc_section{margin-bottom:70px;}

.gwc_footer{padding:14px 10px; width:100%;background:rgba(255,255,255,0.8); border-top:1px solid #e5e5e5; position:fixed;bottom:0px; font-size:14px;}

.gwc_footer p{line-height:18px;}

.gwc_footer a{display:block; background:#b92120; width:80px; height:35px; line-height:35px;border-radius:5px;text-align:center;color:#fff;}
...全文
5003 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
风情雨 2017-06-26
  • 打赏
  • 举报
 回复
??? js
pm-mybook 2017-06-01
  • 打赏
  • 举报
 回复
这种界面一般都是循环出来的吧，你们循环的是table，还是div形式的，求教
天下有道 2017-03-30
  • 打赏
  • 举报
 回复
效果如图
天下有道 2017-03-30
  • 打赏
  • 举报
 回复
我最近也在做这个，也能实现全选效果 //全选 $("#allcheck").click(function () { if ($(this).is(":checked")) { $(":checkbox").attr("checked", true); $("#lblnum").text(num); $("#sum").text(sum); $("#btnPay").removeClass("Pay").addClass("btn"); } else { $(":checkbox").attr("checked", false); $("#lblnum").text(0); $("#sum").text(0); $("#btnPay").removeClass("btn").addClass("Pay"); } });
qq_24708589 2017-03-16
  • 打赏
  • 举报
 回复
楼楼，求完整的购物车代码哈~~~急需~楼楼大好人~拜托拜托~928260749@qq.com
huawenfuxing 2016-12-21
  • 打赏
  • 举报
 回复
我也需要，我的邮箱11302431@qq.com
莫普斯 2016-12-21
  • 打赏
  • 举报
 回复
大哥，没js效果呢！
程序员烧烤店 2016-12-12
  • 打赏
  • 举报
 回复
这js你不写上，你这不是在搞事情啊
qq_36983011 2016-12-09
  • 打赏
  • 举报
 回复
求 样式包 谢谢大神了 q913622742@qq.com
qq_36465371 2016-10-21
  • 打赏
  • 举报
 回复
楼主能不能发一个完整的给我呢？要js效果的，我是菜鸟来的，拜托了，万分感谢！1843264795@qq.com[/quote]
qq_34008324 2016-09-10
  • 打赏
  • 举报
 回复
楼主能不能发一个完整的给我呢？要js效果的，我是菜鸟来的，拜托了，万分感谢！457511771@qq.com
隔夜饭香 2016-06-18
  • 打赏
  • 举报
 回复
楼主发一份完整带给我，拜托 1950832345@qq.com 应该有JS的吧
qq_28519807 2015-12-09
  • 打赏
  • 举报
 回复
楼主有没有仿淘宝购物车的所有代码啊 有得话能不能发给我一份啊（1303049692@qq.com）； 现在项目急用这个（前端新手） 谢了
qq_28519807 2015-12-09
  • 打赏
  • 举报
 回复
楼主有没有仿淘宝购物车的所有代码啊 有得话能不能发给我一份啊（1303049692@qq.com）； 现在项目记者用这个（前端新手） 谢了
前面端盘子的 2015-08-19
  • 打赏
  • 举报
 回复
你是不是忘了放js了，很多效果都没有实现a..
JavaScript教程（三）之 jQuery
简单理解：就是一个JS文件，里面对我们原生JS代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能了；比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）； 常见的JavaScript库...
JavaScript基础知识之jQuery
③不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码 3.jQuery的顶级对象 其中是jQuery的别称，在代码中可以使用jQuery来代替,但一般为了方便，通常直接使用 是jQuery的
jQuery编程（jQuery概述、基本使用、常用API(jQuery选择器、样式操作、效果、属性操作、内容文本值、元素操作、尺寸位置操作)）
JavaScript库：即一个js文件，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预定好的函数在里面，比如动画animate、hide、show，比如获取元素等。常见的...
仿淘宝购物车模块，关键练习js
html代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=...
05-jQuery
jQuery 介绍 JavaScript 库 ...常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQue..
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章