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
()
$( 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>