代码改变世界

23.全选

2017-05-08 16:07  笨笨03  阅读(126)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>T64-实现全选</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color:rgb(51, 199, 18);
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>




</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="theadCheckbox" />
            </th>
            <th>快递</th>
            <th>收件人</th>
            <th>电话</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>顺丰</td>
            <td>张大大</td>
            <td>186*****897
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>韵达</td>
            <td>张全蛋</td>
            <td>186*****897
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>圆通</td>
            <td>韩非</td>
            <td>186*****897
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>中国邮政</td>
            <td>卫庄</td>
            <td>186*****897
        </tr>
        </tbody>
    </table>
</div>

</body>

<script type="text/javascript">
    window.onload = function() {

        var theadCheckbox = document.getElementById("theadCheckbox");//获得实现全选的复选框

        var tbody = document.getElementById("tbody");

        var myCheckbox = tbody.getElementsByTagName("input");//获得tbody里的所有复选框


        theadCheckbox.onclick = function() {

            for(var i = 0; i < myCheckbox.length; i++) {
                myCheckbox[i].checked = this.checked;
            }
        }}




</script>

</html>
  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>T64-实现全选</title>
  6     <style type="text/css">
  7         * {
  8             padding: 0;
  9             margin: 0;
 10         }
 11 
 12         .wrap {
 13             width: 300px;
 14             margin: 100px auto 0;
 15         }
 16 
 17         table {
 18             border-collapse: collapse;
 19             border-spacing: 0;
 20             border: 1px solid #c0c0c0;
 21             width: 300px;
 22         }
 23 
 24         th,
 25         td {
 26             border: 1px solid #d0d0d0;
 27             color: #404060;
 28             padding: 10px;
 29         }
 30 
 31         th {
 32             background-color:rgb(51, 199, 18);
 33             font: bold 16px "微软雅黑";
 34             color: #fff;
 35         }
 36 
 37         td {
 38             font: 14px "微软雅黑";
 39         }
 40 
 41         tbody tr {
 42             background-color: #f0f0f0;
 43         }
 44 
 45         tbody tr:hover {
 46             cursor: pointer;
 47             background-color: #fafafa;
 48         }
 49     </style>
 50 
 51 
 52 
 53 
 54 </head>
 55 <body>
 56 <div class="wrap">
 57     <table>
 58         <thead>
 59         <tr>
 60             <th>
 61                 <input type="checkbox" id="theadCheckbox" />
 62             </th>
 63             <th>快递</th>
 64             <th>收件人</th>
 65             <th>电话</th>
 66         </tr>
 67         </thead>
 68         <tbody id="tbody">
 69         <tr>
 70             <td>
 71                 <input type="checkbox" />
 72             </td>
 73             <td>顺丰</td>
 74             <td>张大大</td>
 75             <td>186*****897
 76         </tr>
 77         <tr>
 78             <td>
 79                 <input type="checkbox" />
 80             </td>
 81             <td>韵达</td>
 82             <td>张全蛋</td>
 83             <td>186*****897
 84         </tr>
 85         <tr>
 86             <td>
 87                 <input type="checkbox" />
 88             </td>
 89             <td>圆通</td>
 90             <td>韩非</td>
 91             <td>186*****897
 92         </tr>
 93         <tr>
 94             <td>
 95                 <input type="checkbox" />
 96             </td>
 97             <td>中国邮政</td>
 98             <td>卫庄</td>
 99             <td>186*****897
100         </tr>
101         </tbody>
102     </table>
103 </div>
104 
105 </body>
106 
107 <script type="text/javascript">
108     window.onload = function() {
109 
110         var theadCheckbox = document.getElementById("theadCheckbox");//获得实现全选的复选框
111 
112         var tbody = document.getElementById("tbody");
113 
114         var myCheckbox = tbody.getElementsByTagName("input");//获得tbody里的所有复选框
115 
116 
117         theadCheckbox.onclick = function() {
118 
119             for(var i = 0; i < myCheckbox.length; i++) {
120                 myCheckbox[i].checked = this.checked;
121             }
122         }}
123 
124 
125 
126 
127 </script>
128 
129 </html>
View Code