[JQuery]JQuery的CheckBox操作控制

<!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

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏