1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <script type="text/javascript">
8 onload=function(){
9 // 获取所有的tr,返回数组
10 var alltr=document.getElementsByTagName("tr");
11 for (var i = 0; i < alltr.length; i++) {
12 if(i%2==0){
13 alltr[i].style.backgroundColor="aqua";
14 }else{
15 alltr[i].style.backgroundColor="blueviolet";
16 }
17 }
18 }
19 //全选全不选
20 function checkAll(){
21 //1.获取编号前面的复选框
22 var checkAllEle = document.getElementById("checkAll");
23 //2.对编号前面复选框的状态进行判断
24 if(checkAllEle.checked==true){
25 //3.获取下面所有的复选框
26 var checkboxtest = document.getElementsByName("checkboxtest");
27 //4.对获取的所有复选框进行遍历
28 for(var i=0;i<checkboxtest.length;i++){
29 //5.拿到每一个复选框，并将其状态置为选中
30 checkboxtest[i].checked=true;
31 }
32 }else{
33 //6.获取下面所有的复选框
34 var checkboxtest = document.getElementsByName("checkboxtest");
35 //7.对获取的所有复选框进行遍历
36 for(var i=0;i<checkboxtest.length;i++){
37 //8.拿到每一个复选框，并将其状态置为未选中
38 checkboxtest[i].checked=false;
39 }
40 }
41 }
42
43
44 </script>
45 </head>
46 <body>
47 <div id="">
48 <table border="1" cellspacing="" cellpadding="" width="400px">
49 <tr>
50 <td>测试数据</td>
51 <td>测试数据</td>
52 <td>测试数据</td>
53 <td>测试数据</td>
54 </tr>
55 <tr>
56 <td>测试数据</td>
57 <td>测试数据</td>
58 <td>测试数据</td>
59 <td>测试数据</td>
60 </tr>
61 <tr>
62 <td>测试数据</td>
63 <td>测试数据</td>
64 <td>测试数据</td>
65 <td>测试数据</td>
66 </tr>
67 <tr>
68 <td>测试数据</td>
69 <td>测试数据</td>
70 <td>测试数据</td>
71 <td>测试数据</td>
72 </tr>
73 </table>
74 </div>
75 <br/><br/>
76 <div id="">
77 <input type="checkbox" name="" id="checkAll" value="" onclick="checkAll()"/>全选/全不选<br/>
78 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/>
79 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/>
80 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/>
81 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/>
82 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/>
83 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/>
84 </div>
85 </body>
86 </html>
原文地址：https://www.cnblogs.com/breezezqf/p/9230919.html
时间： 2024-07-30 04:27:12