简单的jquery模仿复选框全选全不选功能

简介:

照样,在此我把关键代码贴出来,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" >&#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 >

效果图预览:

wKiom1dvub-SYXJyAABXgbEJfXo447.jpg

本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1793062

相关文章
|
11天前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
13 0
|
11天前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
36 0
|
7月前
|
JavaScript 前端开发
Javascript知识【jQuery属性操作&案例:重写复选框操作】
Javascript知识【jQuery属性操作&案例:重写复选框操作】
|
8月前
|
JSON JavaScript 前端开发
jQuery动画功能和封装原理
jQuery动画功能和封装原理
56 0
|
11天前
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
11 1
|
6月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
67 0
jQuery点击图片来回切换功能
|
6月前
|
JavaScript
jQuery数据结构渲染(4):复选框checkbox赋值
jQuery数据结构渲染(4):复选框checkbox赋值
40 1
|
6月前
|
JavaScript
jQuery 复选框 checkbox 取值和赋值
jQuery 复选框 checkbox 取值和赋值
|
6月前
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
64 0
|
6月前
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
33 0