JavaScript中复选框的全选和反选功能的实现

这是我平时学习时的练习，贴出来跟大家一起讨论，本来是新手，欢迎老手指正错误。

 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">     

 2<html>     

 3    <head>     

 4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     

 5        <title>Test CheckBox</title>     

 6        <style type="text/css">     

 7            body{      

 8                font-family:Courier;      

 9            }      

10        </style>     

11        <script type="text/javascript">     

12            function checkAll(){      

13                var checkAll = document.getElementById('chkAll') ;      

14                var checkBox = document.getElementById('checkBox') ;      

15                var arr = new Array() ;      

16                arr = checkBox.getElementsByTagName('input') ;      

17                if(checkAll.checked==true){  //checkAll selected      

18                    for(i=0; i<arr.length; i++){      

19                        arr[i].checked = true ;       

20                    }      

21                }      

22                if(checkAll.checked==false){      

23                    for(i=0; i<arr.length; i++){      

24                        arr[i].checked = false ;          

25                    }      

26                }      

27     

28            }      

29            function checkCancel(){      

30                var checkCancel = document.getElementById('chkCancel') ;      

31                var checkBox = document.getElementById('checkBox') ;      

32                var arr = new Array() ;      

33                arr = checkBox.getElementsByTagName('input') ;      

34                if(checkCancel.checked==true){ //checkCancel selected      

35                    for(i=0; i<arr.length; i++){      

36                        if(arr[i].checked == true){      

37                            arr[i].checked = false ;      

38                        }else {      

39                            arr[i].checked = true ;      

40                        }         

41                    }      

42                }      

43            }      

44        </script>     

45    </head>     

46    <body>     

47              

48        <input type="checkbox" id="chkAll" onclick="checkAll()"/> check All <br/>     

49        <input type="checkbox" id="chkCancel" onclick="checkCancel()"/> check Cancel <br/>     

50            <br />          

51        <div id="checkBox">     

52        <input type="checkbox" id="chk1"/> 1 <br/>     

53        <input type="checkbox" id="chk2"/> 2 <br/>     

54        <input type="checkbox" id="chk3"/> 3 <br/>     

55        <input type="checkbox" id="chk4"/> 4 <br/>     

56        <input type="checkbox" id="chk5"/> 5 <br/>     

57        </div>     

58    </body>     

59</html>    

60

下图是显示效果

posted on 2010-11-11 21:58 zeroline 阅读(599) 评论(0) 编辑收藏所属分类: JavaScript

常用链接

留言簿

随笔分类

随笔档案

文章分类

文章档案

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园博客园最新博文博问管理
相关文章: javascript 触发事件列表 15款js编辑器大全收藏经典 JavaScript 正则表达式常用的js验证数字，电话号码，传真，邮箱，手机号码，邮编，日期使用JS对表格中的行进行增删 JavaScript中复选框的全选和反选功能的实现