jquery 操作checkbox的例子(全选,反选,获取选取值...)
2009-10-19 21:32
711 查看
1
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
2
<
HTML
>
3
<
HEAD
>
4
<
TITLE
>
New Document
</
TITLE
>
5
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
/>
6
<
link
href
="css/ingrid.css"
rel
="stylesheet"
type
="text/css"
>
7
<
script
language
="JavaScript"
src
="jquery-1.2.3.pack.js"
type
="text/javascript"
></
script
>
8
<
SCRIPT
LANGUAGE
="JavaScript"
>
9
<!--
10
$(
"
document
"
).ready(
function
()
{
11
12
$(
"
#btn1
"
).click(
function
()
{
13
14
$(
"
[name='checkbox']
"
).attr(
"
checked
"
,
'
true
'
);
//
全选
15
16
}
)
17
$(
"
#btn2
"
).click(
function
()
{
18
19
$(
"
[name='checkbox']
"
).removeAttr(
"
checked
"
);
//
取消全选
20
21
}
)
22
$(
"
#btn3
"
).click(
function
()
{
23
24
$(
"
[name='checkbox']:even
"
).attr(
"
checked
"
,
'
true
'
);
//
选中所有奇数
25
26
}
)
27
$(
"
#btn4
"
).click(
function
()
{
28
29
$(
"
[name='checkbox']
"
).each(
function
()
{
30
31
32
if
($(
this
).attr(
"
checked
"
))
33
{
34
$(
this
).removeAttr(
"
checked
"
);
35
36
}
37
else
38
{
39
$(
this
).attr(
"
checked
"
,
'
true
'
);
40
41
}
42
43
}
)
44
45
}
)
46
$(
"
#btn5
"
).click(
function
()
{
47
var
str
=
""
;
48
$(
"
[name='checkbox'][checked]
"
).each(
function
()
{
49
str
+=
$(
this
).val()
+
"
/r/n
"
;
50
}
)
51
alert(str);
52
}
)
53
}
)
54
//
-->
55
</
SCRIPT
>
56
57
</
HEAD
>
58
59
<
BODY
>
60
<
form
name
="form1"
method
="post"
action
=""
>
61
<
input
type
="button"
id
="btn1"
value
="全选"
>
62
<
input
type
="button"
id
="btn2"
value
="取消全选"
>
63
<
input
type
="button"
id
="btn3"
value
="选中所有奇数"
>
64
<
input
type
="button"
id
="btn4"
value
="反选"
>
65
<
input
type
="button"
id
="btn5"
value
="获得选中的所有值"
>
66
<
br
>
67
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox1"
>
68
checkbox1
69
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox2"
>
70
checkbox2
71
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox3"
>
72
checkbox3
73
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox4"
>
74
checkbox4
75
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox5"
>
76
checkbox5
77
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox6"
>
78
checkbox6
79
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox7"
>
80
checkbox7
81
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox8"
>
82
checkbox8
83
</
form
>
84
85
</
BODY
>
86
</
HTML
>
87
（）
<
script type
=
"text/javascript"
>
$(
document
).
ready
(function() {
$(
"#selectAll"
).
click
( function() {
$(
":checkbox"
).
each
( function() { $(
this
).
attr
(
"checked"
,
"true"
); })
});
$(
"#selectOther"
).
click
( function() {
$(
":checkbox"
).
each
( function() { $(
this
).
attr
(
"checked"
,!
this
.
checked
); })
});
});
</script>
<body>
<input type="checkbox" name="cb" value ="box1">box1
<input type="checkbox" name="cb" value ="box2">box2
<input type="checkbox" name="cb" value ="box3">box3
<input type="button" value="全选" id="selectAll">
<input type="button" value="反选" id="selectOther">
</body>
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
2
<
HTML
>
3
<
HEAD
>
4
<
TITLE
>
New Document
</
TITLE
>
5
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
/>
6
<
link
href
="css/ingrid.css"
rel
="stylesheet"
type
="text/css"
>
7
<
script
language
="JavaScript"
src
="jquery-1.2.3.pack.js"
type
="text/javascript"
></
script
>
8
<
SCRIPT
LANGUAGE
="JavaScript"
>
9
<!--
10
$(
"
document
"
).ready(
function
()
{
11
12
$(
"
#btn1
"
).click(
function
()
{
13
14
$(
"
[name='checkbox']
"
).attr(
"
checked
"
,
'
true
'
);
//
全选
15
16
}
)
17
$(
"
#btn2
"
).click(
function
()
{
18
19
$(
"
[name='checkbox']
"
).removeAttr(
"
checked
"
);
//
取消全选
20
21
}
)
22
$(
"
#btn3
"
).click(
function
()
{
23
24
$(
"
[name='checkbox']:even
"
).attr(
"
checked
"
,
'
true
'
);
//
选中所有奇数
25
26
}
)
27
$(
"
#btn4
"
).click(
function
()
{
28
29
$(
"
[name='checkbox']
"
).each(
function
()
{
30
31
32
if
($(
this
).attr(
"
checked
"
))
33
{
34
$(
this
).removeAttr(
"
checked
"
);
35
36
}
37
else
38
{
39
$(
this
).attr(
"
checked
"
,
'
true
'
);
40
41
}
42
43
}
)
44
45
}
)
46
$(
"
#btn5
"
).click(
function
()
{
47
var
str
=
""
;
48
$(
"
[name='checkbox'][checked]
"
).each(
function
()
{
49
str
+=
$(
this
).val()
+
"
/r/n
"
;
50
}
)
51
alert(str);
52
}
)
53
}
)
54
//
-->
55
</
SCRIPT
>
56
57
</
HEAD
>
58
59
<
BODY
>
60
<
form
name
="form1"
method
="post"
action
=""
>
61
<
input
type
="button"
id
="btn1"
value
="全选"
>
62
<
input
type
="button"
id
="btn2"
value
="取消全选"
>
63
<
input
type
="button"
id
="btn3"
value
="选中所有奇数"
>
64
<
input
type
="button"
id
="btn4"
value
="反选"
>
65
<
input
type
="button"
id
="btn5"
value
="获得选中的所有值"
>
66
<
br
>
67
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox1"
>
68
checkbox1
69
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox2"
>
70
checkbox2
71
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox3"
>
72
checkbox3
73
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox4"
>
74
checkbox4
75
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox5"
>
76
checkbox5
77
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox6"
>
78
checkbox6
79
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox7"
>
80
checkbox7
81
<
input
type
="checkbox"
name
="checkbox"
value
="checkbox8"
>
82
checkbox8
83
</
form
>
84
85
</
BODY
>
86
</
HTML
>
87
（）
<
script type
=
"text/javascript"
>
$(
document
).
ready
(function() {
$(
"#selectAll"
).
click
( function() {
$(
":checkbox"
).
each
( function() { $(
this
).
attr
(
"checked"
,
"true"
); })
});
$(
"#selectOther"
).
click
( function() {
$(
":checkbox"
).
each
( function() { $(
this
).
attr
(
"checked"
,!
this
.
checked
); })
});
});
</script>
<body>
<input type="checkbox" name="cb" value ="box1">box1
<input type="checkbox" name="cb" value ="box2">box2
<input type="checkbox" name="cb" value ="box3">box3
<input type="button" value="全选" id="selectAll">
<input type="button" value="反选" id="selectOther">
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery对表单checkbox复选框的操作例子(全选,反选,获取选取值)
- jquery 操作checkbox的例子(全选,反选,获取选取值...)
- jQuery操作checkbox的例子(全选,反选,获取选取值)【转】
- jquery 操作checkbox的例子(全选,反选,获取选取值...)
- jquery 操作checkbox的例子(全选,反选,获取选取值...)
- JQuery实现下拉框的选择 与当CheckBox为服务器控件时如何获取值的操作，实现全选与删除
- JQuery实现下拉框的选择 与当CheckBox为服务器控件时如何获取值的操作，实现全选与删除
- JQuery获取checkbox值,checkbox全选,操作checkbox
- jQuery获取checkbox选中项等操作及注意事项
- jquery 循环获取checkBox的值,以及对复选框选中，取消，操作按钮
- 解决jquery操作checkbox全选全不选无法勾选问题
- jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
- jquery、js操作checkbox全选反选
- jQuery操作动态生成的Checkbox，完成全选和反选，以删除某一行或几行
- jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）
- jQuery获取checkbox选中项等操作及注意事项
- jquery .prop()的相关操作——全选、反选、获得所有选中的checkbox
- Jquery对checkbox操作，全选，取值
- JQuery对checkbox操作 （循环获取）