演示效果：

全选/全不选/反选【DOM】_html


代码实现：

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
  <head>
4
    <title>check.html</title>
5
    
6
    <meta http-equiv="keywords" cnotallow="keyword1,keyword2,keyword3">
7
    <meta http-equiv="description" cnotallow="this is my page">
8
    <meta http-equiv="content-type" cnotallow="text/html; charset=UTF-8">
9
  </head>
10
  
11
  <body>
12
    选择您的爱好：
13
     <hr/>      
14
     <input type="checkbox" name="checkItems" value="全选/全不选"/>全选/全不选
15
     <br>                           
16
        <input type="checkbox" name="items" value="足球" />足球
17
        <input type="checkbox" name="items" value="篮球"/>篮球
18
        <input type="checkbox" name="items" value="游泳"/>游泳
19
        <input type="checkbox" name="items" value="唱歌"/>唱歌
20
        <br>
21
        <input type="button" name="checkall" id="checkall" value="全选" />    
22
        <input type="button" name="checkall" id="checkallNo" value="全不选" />
23
        <input type="button" name="checkall" id="check_revsern" value="反选" />
24
  </body>
25
  <script language="JavaScript">
26
        //******************************全选  
27
        //获取id=checkall的按钮对象，并添加onclick事件
28
        document.getElementById("checkall").onclick = checkall; //注意js里面onclick属性调用函数不需要带()带了纠错了。html中onclick需要带()
29
        //全选函数
30
        function checkall(){
31
            //获取所有的checkbox类型的复选框对象
32
            var items_nodes = document.getElementsByName("items");
33
            //遍历集合，并设置其checked属性为ture
34
            for(var i=0; i<items_nodes.length; i++){
35
                items_nodes[i].checked = true;
36
            }
37
        }
38
        //******************************全不选 
39
        //获取id=checkallNo的按钮对象，并添加onclick事件
40
        document.getElementById("checkallNo").onclick = checkallNo;
41
        //全不选函数
42
        function checkallNo(){
43
            //获取所有的checkbox类型的复选框对象
44
            var items_nodes = document.getElementsByName("items");
45
            //遍历集合，并设置其checked属性为false
46
            for(var i=0; i<items_nodes.length; i++){
47
                items_nodes[i].checked = false;
48
            }
49
        }
50
        //******************************反选  
51
        //获取id=check_revsern的按钮对象，并添加onclick事件
52
        document.getElementById("check_revsern").onclick = check_revsern;
53
        //反选函数
54
        function check_revsern(){
55
            //获取所有的checkbox类型的复选框对象
56
            var items_nodes = document.getElementsByName("items");
57
            //遍历集合
58
            for(var i=0; i<items_nodes.length; i++){
59
                if(items_nodes[i].checked == true){//判断每一个选项的checked值，如果为true，则改为false；如果为false，则改为true
60
                    items_nodes[i].checked = false;
61
                }else{
62
                    items_nodes[i].checked = true;
63
                }
64
            }
65
        }
66
        //******************************全选/全不选  
67
        //获取name属性为checkItems的复选按钮的复选框对象，并添加onclick事件
68
        document.getElementsByName("checkItems")[0].onclick = checkItems;
69
        function checkItems(){
70
            //判断该复选按钮的checked值，如果为true，则name属性值为items的复选框全选；否则，全不选
71
            if(this.checked == true){
72
                checkall();//调用全选函数
73
            }else{
74
                checkallNo();//调用全不选函数
75
            }
76
        }
77
    
78
    
79
  </script>
80
</html>