Ferris教程学习笔记:js示例2.17 复选框（checkbox）全选/全不选/反选

//这个案例知识点不多
复选框的checked属性 true false
true 选中 false 没有选中
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
 4 <title>复选框（checkbox）全选/全不选/反选</title>
 5 <style type="text/css">
 6  body,dl,dt,dd,p{margin:0;padding:0;}
 7  body{font-family:Tahoma;font-size:12px;}
 8  label,input,a{vertical-align:middle;}
 9  label{padding:0 10px 0 5px;}
10  a{color:#09f;text-decoration:none;}
11  a:hover{color:red;}
12  dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;}
13  dt{padding-bottom:10px;border-bottom:1px solid #666;}
14  dt label{font-weight:700;}
15  p{margin-top:10px;}
16 </style>
17 </head>
18 <body>
19 <dl>
20  <dt>
21   <input id="checkAll" type="checkbox" />
22   <label>全选</label>
23   <a href="javascript:;">反选</a>
24  </dt>
25  <dd>
26        <p><input name="item" type="checkbox"><label>选项（一）</label></p>
27         <p><input name="item" type="checkbox"><label>选项（二）</label></p>
28         <p><input name="item" type="checkbox"><label>选项（三）</label></p>
29         <p><input name="item" type="checkbox"><label>选项（四）</label></p>
30         <p><input name="item" type="checkbox"><label>选项（五）</label></p>
31         <p><input name="item" type="checkbox"><label>选项（六）</label></p>
32         <p><input name="item" type="checkbox"><label>选项（七）</label></p>
33         <p><input name="item" type="checkbox"><label>选项（八）</label></p>
34         <p><input name="item" type="checkbox"><label>选项（九）</label></p>
35         <p><input name="item" type="checkbox"><label>选项（十）</label></p> 
36  </dd>
37 </dl>
38 <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
39 <script type="text/javascript">
40  window.onload = function(){
41    var input = document.getElementsByTagName("input");
42    var a = document.getElementsByTagName("a")[0];
43    var label =   document.getElementsByTagName("label")[0];
44    input[0].onclick = function(){
45       
46       for(var i=1;i<input.length;i++){
47          input[i].checked = this.checked;
48       }
49       isCheck();
50    };
51    //反选
52    a.onclick = function(){
53       for(var i=1;i<input.length;i++){
54          input[i].checked =  !input[i].checked;
55       }  
56    };
57    
58    function isCheck(){
59      label.innerHTML = input[0].checked ? "全选" : "全不选";
60    }
61    
62  };
63  
64  //这个案例知识点不多
65  //复选框的checked属性 true false
66  //true 选中 false 没有选中
67 </script>
68 </body>
69 </html>