jquery 操作checkbox的例子(全选,反选,获取选取值)
2008-12-22 18:08
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>
87http://hi.baidu.com/godist/blog/item/b28e5924edbadd064c088d8e.html
2008-12-22 18:08
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>
87http://hi.baidu.com/godist/blog/item/b28e5924edbadd064c088d8e.html
934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
