全选和反选 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7     <style>
 8         ul {
 9             list-style: none;
10         }
11     </style>
12     <script>
13         window.onload = function () {
14             function $(id){
15                 return document.getElementById(id);
16             }
17             function $arr(id){
18                 return document.getElementsByTagName(id);
19             }
20             var inputs=$("bottom").getElementsByTagName("input");
21             /*$arr("button")[0].onclick = function () {
22                 for(var i=0;i<inputs.length;i++){
23                     inputs[i].checked = true;
24                 }
25             }
26             $arr("button")[1].onclick = function () {
27                 for(var i=0;i<inputs.length;i++){
28                     inputs[i].checked = false;
29                 }
30             }*/
31 //            函数简化版
32             function all(flag){
33                 for(var i=0;i<inputs.length;i++){
34                     inputs[i].checked=flag;
35                 }
36             }
37             $arr("button")[0].onclick = function () {
38                 all(true);
39             }
40             $arr("button")[1].onclick = function () {
41                 all(false);
42             }
43             $arr("button")[2].onclick = function () {
44                 for(var i=0;i<inputs.length;i++){
45                     if(inputs[i].checked == true)
46                         inputs[i].checked=false;
47                     else
48                         inputs[i].checked =true;
49                 }
50             }
51         }
52     </script>
53 <body>
54 <div id="top">
55     <button>全选</button>
56     <button>取消</button>
57     <button>反选</button>
58 </div>
59 <div id="bottom">
60     <ul>
61         <li>选项: <input type="checkbox" /></li>
62         <li>选项: <input type="checkbox" /></li>
63         <li>选项: <input type="checkbox" /></li>
64         <li>选项: <input type="checkbox" /></li>
65         <li>选项: <input type="checkbox" /></li>
66         <li>选项: <input type="checkbox" /></li>
67         <li>选项: <input type="checkbox" /></li>
68         <li>选项: <input type="checkbox" /></li>
69         <li>选项: <input type="checkbox" /></li>
70         <li>选项: <input type="checkbox" /></li>
71         <li>选项: <input type="checkbox" /></li>
72         <li>选项: <input type="checkbox" /></li>
73     </ul>
74 </div>
75 </body>
76 </html>

 

posted @ 2017-07-02 20:48  清风白水  阅读(208)  评论(0)  编辑  收藏  举报