照样，在此我把关键代码贴出来，css样式我为了简单，就单纯的是在选中后，更换了一张背景图片而已。
jquery代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$(
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代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<
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
>
|
效果图预览：
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1793062
