简单的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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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>