要做到如下图所示的事例

 

则所需的代码是

  1 <html lang="en">
  2 <head>
  3     <meta charset="UTF-8">
  4     <title>图片作业01</title>
  5     <style>
  6 
  7         .yiheng{
  8             background-color: #FFFF66;
  9             text-align: center;
 10         }
 11         .yihou{
 12             background-color: #66FFFF;
 13             text-align: center;
 14         }
 15 
 16         table,td{
 17             border: 1px black solid;
 18         }
 19     </style>
 20 </head>
 21 <body>
 22 <div>
 23 <table>
 24     <tr>
 25         <td><input type="checkbox" class="first" name="first" onclick="selectAll()"/>全选 </td>
 26         <td class="yiheng"><span>复选框全选事例</span></td>
 27     </tr>
 28     <tr>
 29         <td><input type="checkbox" class="all" name="all"/>1 </td>
 30         <td><span>作用:</span></td>
 31     </tr>
 32     <tr>
 33         <td><input type="checkbox" class="all" name="all"/>2 </td>
 34         <td><span>a:单击列头全选或全部选子项</span></td>
 35     </tr>
 36     <tr>
 37         <td><input type="checkbox" class="all" name="all"/>3 </td>
 38         <td><span>b:只要有一个没选中则取消列头的全选状态</span></td>
 39     </tr>
 40     <tr>
 41         <td><input type="checkbox" class="all" name="all"/>4 </td>
 42         <td><span>c:当所有的子选项选中时,列头全选框自动为选中状态</span></td>
 43     </tr>
 44     <tr>
 45         <td><input type="checkbox" class="all" name="all"/>5 </td>
 46         <td><span></span></td>
 47     </tr>
 48     <tr>
 49         <td><input type="checkbox" class="all" name="all"/>6 </td>
 50         <td><span></span></td>
 51     </tr>
 52     <tr>
 53         <td><input type="checkbox" class="all" name="all"/>7 </td>
 54         <td><span></span></td>
 55     </tr>
 56     <tr>
 57         <td><input type="checkbox" class="all" name="all"/>8 </td>
 58         <td><span></span></td>
 59     </tr>
 60     <tr>
 61         <td><input type="checkbox" class="last" name="last" onclick="notSelect()"/>反选 </td>
 62         <td class="yihou"><span>反选事例</span></td>
 63     </tr>
 64 </table>
 65 </div>
 66 <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
 67 <script>
 68     var fistInp=document.getElementsByName("first")[0];   //获取全选框
 69     var allele=document.getElementsByName("all");
 70     var lastInp=document.getElementsByName("last")[0];    //获取反选框
 71 
 72     function selectAll() {
 73         if(fistInp.checked===true){
 74             for(var i=0;i<allele.length;i++){
 75                 allele[i].checked=true;
 76                 lastInp.checked=false;
 77             }
 78         }
 79     }
 80     for(var j=0;j<allele.length;j++) {
 81     allele[j].onclick=function () {
 82         for(var i=0;i<allele.length;i++) {
 83             if (allele[i].checked === false) {
 84                 fistInp.checked = false;
 85                 break;  //如果有一个没有选中的话就不会走下一个else;
 86             }else {
 87                 fistInp.checked = true;
 88             }
 89         }
 90     }
 91     }
 92     for(var i=0;i<allele.length;i++) {
 93         if(allele[i].checked === false){
 94             fistInp.checked=false;
 95         }
 96 
 97     }
 98 
 99    function notSelect() {
100        if(lastInp.checked){
101            for(var i=0;i<allele.length;i++){
102                if(allele[i].checked){
103                    allele[i].checked=false;
104                    fistInp.checked=false;
105                }else {
106                    allele[i].checked=true;
107                    fistInp.checked=false;
108                }
109            }
110        }
111    }
112 
113 </script>
114 </body>
115 </html>

,这其中的false和true也可换成0和1.