简单的jquery模仿复选框全选全不选功能-创新互联

照样，在此我把关键代码贴出来，css样式我为了简单，就单纯的是在选中后，更换了一张背景图片而已。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、网站空间、营销软件、网站建设、香洲网站维护、网站推广。

jquery代码：

 	$(function(){
        		$(" span.zdy-icon-radio").click(function(){
        			$(this).toggleClass("active");
        		});
	
                 $("#checkall").click(function(){

			if($(this).hasClass('active')){				 //如果当前点击的多选框被选中
				 $('.gwc-bg span.zdy-icon-radio').addClass("active");
			}else{								
			     $('.gwc-bg span.zdy-icon-radio').removeClass("active");
			}
	 });
	 });

html代码：

<div class="xp-content02">
			<div class="headertop mui-clearfix order-border" >
				<div class="left_welcome">
					<a href="../index.html">秀品</a>
				</div>
				<div class="right_pleaseLogin">
					请先[<a href="login.html">登录</a>或[<a href="register.html">注册</a> ]
					<i class="iconfont">&#xe60d;</i> <a href="#">购物车 </a><span class="cs">0</span> 件
				</div>
			</div>
			<div class="tt02">
				购物车
			</div>
		   <div class="gouwuche">
		   	   <li class="mui-table-view-cell">
		   	   	   <div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="orde-pay-baobei mui-slider-handle" >
					<div class="order-title mui-clearfix">
						<a href="#">编辑</a>
						<a href="#" >
							<span><img src="../img/shop_small_logo.jpg" /></span>
							<span>(Ditto)迪图女装专卖</span>
							<div class="choose-yours02"></div>
						</a>
					</div>
					<div class="order-baobeiCon gwc-bg mui-clearfix">
						<div class="grc-lf">
							<span class="zdy-icon-radio"></span>
						</div>
						<div class="small-img-lef"><img src="../img/order01.jpg"/> </div>
						<div class="baobei-intro-rt wt06" >
							<p class="baobei-title"><a href="#"> 2016春夏季女装新款 重工卡通徽章贴布冰丝...</a></p>
							<p class="gmsl"><span>x 1</span>颜色分类：黑色，尺码 L</p>
							<p class="hs">￥ 259.00</p>
						</div>
					</div>
				</div>
				</li>
				<div class="greybg02"></div>
				<li class="mui-table-view-cell">
		   	   	   <div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="orde-pay-baobei mui-slider-handle" >
					<div class="order-title mui-clearfix">
						<a href="#">编辑</a>
						<a href="#" >
							<span><img src="../img/shop_small_logo.jpg" /></span>
							<span>(Ditto)迪图女装专卖</span>
							<div class="choose-yours02"></div>
						</a>
					</div>
					<div class="gwc-bg mui-clearfix">
						<div class="grc-lf">
							<span class="zdy-icon-radio active"></span>
						</div>
						<div class="small-img-lef"><img src="../img/order01.jpg"/> </div>
						<div class="baobei-intro-rt wt06" >
							<p class="baobei-title"><a href="#"> 2016春夏季女装新款 重工卡通徽章贴布冰丝...</a></p>
							<p class="gmsl"><span>x 1</span>颜色分类：黑色，尺码 L</p>
							<p class="hs">￥ 259.00</p>
						</div>
					</div>
				</div>
				</li>
				<div class="greybg02"></div>
					
		   </div>
		   <div class="gouwuche-jiesuan">
		   	<div class="grc-lf quanxuan">
							<span class="zdy-icon-radio " id="checkall">全选</span>
			</div>
			<div class="heji">
				合计：<span>￥259.00</span>
			</div>
			<div class="jiesuan">
				<a href="submit-order.html">结算</a>
			</div>
		   </div>
		</div>

效果图预览：

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

标题名称：简单的jquery模仿复选框全选全不选功能-创新互联
当前URL：https://www.cdcxhl.com/article38/cseipp.html

成都网站建设公司_创新互联，为您提供小程序开发、外贸建站、域名注册、做网站、网站排名、网站内链

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联