照样,在此我把关键代码贴出来,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"></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>
效果图预览: