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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
| <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>购物车订单列表复选框组件</title>
<style>
.form-group{
margin-bottom: 30px;
height: 30px;
}
/*改变复选框样式*/
.form-group > label > span{
display: inline-block;
margin-right: 5px;
border: 1px solid #d9d9d9;
width: 1.375em;
height: 1.375em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.form-group > label input{
visibility: hidden;
}
/*选中复选框样式*/
.form-group > label > span.active{
background: #ff5252;
position: relative;
border-color: #ff5252;
}
.form-group > label > span.active:after{
position: absolute;
content: '';
width: 0.75em;
height: 0.41em;
border: 2px solid #ffffff;
border-top: none;
border-right: none;
left: 0.3em;
top: 0.35em;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div class="box">
<div class="form-group">
<label><span><input type="checkbox"/></span>2000金币</label>
</div>
<div class="form-group">
<label><span><input type="checkbox"/></span>2000金币</label>
</div>
<div class="form-group">
<label><span><input type="checkbox"/></span>2000金币</label>
</div>
<div class="form-group">
<label><span><input id="checkAll" type="checkbox"/></span>全选</label>
</div>
</div>
<script>
//复选框选择
function CheckList(obj) {
this.checkItem = obj.checkItem.not(obj.checkAll) || $("input[type='checkbox']").not(obj.checkAll);//所有复选框（不包含全选复选框）
this.allCheckItem = obj.checkItem || $("input[type='checkbox']");//所有复选框
this.checkAll = obj.checkAll;//全选复选框
this.state = obj.state || false;//状态为true时，页面刚加载复选框默认都为选中
}
CheckList.prototype ={
init:function() {
this._check();
if(this.state){
this._allCheck();
}else{
this._notAllcheck();
}
},
_check:function() {
//单击全选
var that = this;
this.checkAll.on('click',function() {
if($(this).prop('checked')){
that.checkItem.prop('checked', true).parent().addClass('active');
$(this).prop('checked', true).parent().addClass('active');
}else{
that.checkItem.prop('checked', false).parent().removeClass('active');
$(this).prop('checked', false).parent().removeClass('active');
}
});
//单击每个复选框（不包含全选复选框）
this.checkItem.on('click',function() {
var checkItem =Array.prototype.slice.call(that.checkItem);
var flag =checkItem.every(function(elem,index,array) {
return $(elem).prop('checked');
});
if($(this).prop('checked')){
$(this).prop('checked',true).parent().addClass('active');
}else{
$(this).prop('checked',false).parent().removeClass('active');
}
if(flag){//如果都为选中
that.checkAll.prop('checked', true).parent().addClass('active');
}else{
that.checkAll.prop('checked', false).parent().removeClass('active');
}
})
},
_allCheck:function() {// 全选
this.allCheckItem.prop('checked', true).parent().addClass('active');
},
_notAllcheck:function() {//全不选
this.allCheckItem.prop('checked', false).parent().removeClass('active');
}
};
//兼容旧环境，es5新增的数组方法every
if (!Array.prototype.every)
{
Array.prototype.every = function(fun /*, thisArg */)
{
'use strict';
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function')
throw new TypeError();
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++)
{
if (i in t && !fun.call(thisArg, t[i], i, t))
return false;
}
return true;
};
}
//实例化运用
var checklistA = new CheckList({
checkItem: $("input[type='checkbox']"),//所有复选框对象
checkAll:$("#checkAll"),//全选复选框对象
state:true//状态，为true全选中，为false为不选中（默认为false）
});
checklistA.init();
</script>
</body>
</html>
|