jQuery练习3-对多选框进行操作 

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>exe_1.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 7   </head>
 8   <body>
 9     <input type="checkbox" value="蓝球"/>蓝球
10     <input type="checkbox" value="排球"/>排球    
11     <input type="checkbox" value="羽毛球"/>羽毛球    
12     <input type="checkbox" value="乒乓球"/>乒乓球
13     <input type="button" value="选中的个数"/>
14     <input type="button" value="依次显示选中的value"/>
15     <script type="text/javascript">
16         //对多选框进行操作
17         //1、选中的个数
18         $("input[value='选中的个数']").click(function(){
19             //alert("选中了");
20             //取得选中的个数
21             var size = $(":checked").size();
22             //alert(size);
23         });
24         //2、依次显示选中的value
25         $("input[value='依次显示选中的value']").click(function(){
26             //alert("依次显示选中的value");
27             //取得选中的checkbox的值
28             //var value = $("checked").val();
29             $(":checked").each(function(){
30                 alert($(this).val());                    
31             });
32         });
33         
34         /*或者：
35              $("input:button:eq(0)").click(function(){
36                 window.alert($("input:checkbox:checked").size());
37             });
38             $("input:button:eq(1)").click(function(){
39                 $("input:checkbox:checked").each(function(){
40                     window.alert($(this).val());
41                 });
42             });
43          */
44     </script>
45   </body>
46 </html>

 

posted @ 2013-05-10 15:42  hacket520  阅读(297)  评论(0)  编辑  收藏  举报