jquery 操作checkbox的例子(全选,反选,获取选取值...)

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>

你可能感兴趣的:(jquery 操作checkbox的例子(全选,反选,获取选取值...))