本文章总结jQuery实现checkbox三种情况的全选功能
第一种:等值全选,也称name的等值全选,通过checkbox的名称name实现。
第二种:模糊全选,也称id模糊全选,通过checkbox的id或value值实现。
第三种:值范围全选,也称value值范围全选,通过checkbox的value值实现,或者截取id数字后缀范围判断实现。
等值全选
在工作中经常会用到checkbox的全选功能,平时大家用得最多的全选和反选是第一种,一般都是基于全部名称相同的checkbox进行实现,这种全选比较简单。实现代码如下:
1
2
3
4
5
6
7
|
$(
"input#allSer"
).click(function(){
if
(
this
.checked){
$(
"input[type=checkbox][name=newselectedServers]"
).attr(
"checked"
,
true
);
}
else
{
$(
"input[type=checkbox][name=newselectedServers]"
).attr(
"checked"
,
false
);
}
});
|
模糊全选
模糊全选可已实现特定的需求,如前缀或后缀包含特定字符,首先应了解jQuery模糊匹配的规则:
[属性名称] 匹配包含给定属性的元素
[att=value] 匹配包含给定属性的元素
[att*=value] 模糊匹配
[att!=value] 不能是这个值
[att$=value] 结尾是这个值
[att^=value] 开头是这个值
[att1][att2][att3]... 匹配多个属性条件中的一个
实现例子如下:
1
2
3
|
$(
"input[type=checkbox][name=newselectedServers][id^=new]"
).attr(
"checked"
,
true
);
//全选所有id前缀为new的checkbox
$(
"input[type=checkbox][name=newselectedServers][id$=servers]"
).attr(
"checked"
,
true
);
//全选所有id后缀为servers的checkbox
$(
"input[type=checkbox][name=newselectedServers][value^=20]"
).attr(
"checked"
,
true
);
//全选所有value前缀为20的checkbox
|
还有一种多值模糊全选,实现代码如下:
1
|
$(
"input[type=checkbox][name=newselectedServers][value^=20],[value^=21],[value^=50],[value^=51],[value^=70],[value^=71]"
).attr(
"checked"
,
true
);
|
值范围全选
让我头痛的是第三种值访问全选,前两种都实现不了我想要的功能。
功能要求:实现服务器列表部分全选,服务器列表的value含有的值是数字,特定功能的服务器的值在某一指定的范围,勾选特定功能的全选时就要把指定范围的服务器列表全部选上。
以后需求看起来简单,实现起来也简单,难就难找资料的过程和在想的过程,在网上找了很多关系jQuery实现checkbox全选资料和微博,都没有一篇符合我的要求,最后只能通过自己各种想法,各种调试,最终还是实现的自己想要的功能。想法的关键点在于平时用的全选大部分都是基于checkbox的name和id,很少人使用value实现全选,想到这就成功了一半,再通过遍历比较值的大小就可以实现值范围的全选,大家都迫不及待想知道实现的代码了吧。
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
|
//实现九游服务器的全反选,九游服务器的value范围在2000-5000之间
$(
"input#sjspecialSer"
).click(function(){
if
(
this
.checked){
//遍历value,转换成数字对比
$(
"input[type=checkbox][name=newselectedServers]"
).each(function(index,element){
var serverId = Number(element.value);
if
(serverId >=
2000
&& serverId <
5000
){
$(element).attr(
"checked"
,
true
);
}
});
}
else
{
$(
"input[type=checkbox][name=newselectedServers]"
).each(function(index,element){
var serverId = Number(element.value);
if
(serverId >=
2000
&& serverId <
5000
){
$(element).attr(
"checked"
,
false
);
}
});
}
});
//实现乐玩服务器的全反选,乐玩服务器的value在5000-1000之间
$(
"input#lwspecialSer"
).click(function(){
if
(
this
.checked){
//遍历value,转换成数字对比
$(
"input[type=checkbox][name=newselectedServers]"
).each(function(index,element){
var serverId = Number(element.value);
if
(serverId >=
5000
&& serverId <
10000
){
$(element).attr(
"checked"
,
true
);
}
});
}
else
{
$(
"input[type=checkbox][name=newselectedServers]"
).each(function(index,element){
var serverId = Number(element.value);
if
(serverId >=
5000
&& serverId <
10000
){
$(element).attr(
"checked"
,
false
);
}
});
}
});
出处 http://www.2cto.com/kf/201505/401416.html
|