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>js隔行换色+全选/全部选demo
原文地址：https://www.cnblogs.com/breezezqf/p/9230919.html