案例分析：
1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可；
2.下面复选框需要全部选中，上面的全选才可以选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选框就不选中。
效果图：
代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>表单全选与取消全选</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 table{
12 margin: 100px auto;
13 text-align: center;
14 border: 1px solid gray;
15 border-spacing: 0;
16 cursor: pointer;;
17 }
18 th,td{
19 border: 1px solid gray;
20 padding: 10px;
21 }
22 thead{
23 background-color: powderblue;
24 }
25 .bg{
26 background-color: rgb(190, 189, 189);
27 }
28 </style>
29 </head>
30 <body>
31 <div id="wrap">
32 <table>
33 <thead>
34 <tr>
35 <th><input type="checkbox" id="selectAll"></th>
36 <th>商品</th>
37 <th>价格</th>
38 </tr>
39 </thead>
40 <tbody id="select">
41 <tr>
42 <td><input type="checkbox"></td>
43 <td>iphone 8</td>
44 <td>3999</td>
45 </tr>
46 <tr>
47 <td><input type="checkbox"></td>
48 <td>iphone 8 plus</td>
49 <td>4999</td>
50 </tr>
51 <tr>
52 <td><input type="checkbox"></td>
53 <td>iphone 11</td>
54 <td>5999</td>
55 </tr>
56 <tr>
57 <td><input type="checkbox"></td>
58 <td>iphone 11 pro</td>
59 <td>9999</td>
60 </tr>
61 </tbody>
62 </table>
63 </div>
64 <script>
65 //设计鼠标移入和移出的背景变化
66 var trs=document.getElementById("select").querySelectorAll("tr");
67 for(var i=0;i<trs.length;i++){
68 //鼠标移入事件
69 trs[i].onmouseover=function(){
70 this.className="bg";
71 }
72 //鼠标移出事件
73 trs[i].onmouseout=function(){
74 this.className="";
75 }
76 }
77 //1.全选和取消全选
78 //获取元素
79 var selectAll=document.getElementById("selectAll"); //全选按钮
80 var select=document.getElementById("select").getElementsByTagName("input"); //下面所有的复选框
81 //注册事件
82 selectAll.onclick=function(){
83 //this.checked可以得到当前复选框的选中状态，如果是true则表示选中，如果是false就表示未选中
84 for(var i=0;i<select.length;i++){
85 //看全选框是否全选，把它的选中状态赋值给下面所有的复选框
86 select[i].checked=this.checked;
87 }
88 }
89 //2.判断下面的是否全选
90 for(var i=0;i<select.length;i++){
91 select[i].onclick=function(){
92 var flag=true; //注意flag要放在点击事件里……
93 //下面的变量i是在另一个函数里，和外层的i是不同的作用域
94 for(var i=0;i<select.length;i++){
95 if(!select[i].checked){
96 flag=false;
97 break;
98 }
99 }
100 selectAll.checked=flag;
101 }
102 }
103 </script>
104 </body>
105 </html>
原文地址：https://www.cnblogs.com/cy1227/p/12297946.html
时间： 2024-10-12 06:32:20