全选反选不选造作 原生js
- 先写出表格的基本样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| <table> <thead> <tr> <th><input type="checkbox" name="all"></th> <th>姓名</th> <th>邮箱</th> <th>附属信息</th> </tr> </thead> <tbody> <tr class="one"> <td><input type="checkbox" name="mail"></td> <td>张三</td> <td>邮箱</td> <td>附属信息</td> </tr> <tr class="two"> <td><input type="checkbox" name="mail"></td> <td>张三</td> <td>邮箱</td> <td>附属信息</td> </tr> <tr class="one"> <td><input type="checkbox" name="mail"></td> <td>张三</td> <td>邮箱</td> <td>附属信息</td> </tr> <tr class="two"> <td><input type="checkbox" name="mail"></td> <td>张三</td> <td>邮箱</td> <td>附属信息</td> </tr> <tr> <th> <input type="checkbox" name="all" />全选 </th> <th colspan="3"> <input type="button" value="全选" /> <input type="button" value="取消全选" /> <input type="button" value="反选" />
</th> </tr> </tbody> </table>
|
样式的基本操作,接下来是css 把样式写出来
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| table { width: 500px; border-collapse: collapse; border: 1px solid #ccc; margin: 0 auto; } table td { border: #249bdb 1px solid; padding: 10px; text-align: center; } table th { border: #249bdb 1px solid; padding: 10px; background-color: rgb(200, 200, 200); } .one { background-color: #9bf7d5; } .two { background-color: #f3e99a; }
|
获取DOM元素进行操作
1 2 3 4 5 6 7 8 9 10 11
| var all1 = document.getElementsByName('all')[0]; var all2 = document.getElementsByName('all')[1]; var allBtn = document.querySelectorAll('input[type = button]')[0]; var allBtn = document.querySelectorAll('input[type = button]')[1]; var allBtn = document.querySelectorAll('input[type = button]')[2]; var cks = document.getElementsByName('mail');
|
给两个全选按钮注册点击事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| all1.onclick = function() { all2.checked = this.checked; for (var i = 0; i < cks.length; i++) { cks[i].checked = this.checked; } };
all2.onclick = function() { all1.checked = this.checked; for (var i = 0; i < cks.length; i++) { cks[i].checked = this.checked; } }
|
但是由于出现了重复代码,下面进行优化 将重复代码封装一个简单的函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| all1.onclick = function() { ckeckall(all1, cks, all2) };
all2.onclick = function() { ckeckall(all2, cks, all1) }
function ckeckall(ele1, cks, ele2) { ele2.checked = ele1.checked; for (var i = 0; i < cks.length; i++) { cks[i].checked = ele1.checked; } }
|
全选按钮的点击事件
1 2 3 4 5 6 7 8
| allBtn.onclick = function() { all1.checked = true; all2.checked = true; for (var i = 0; i < cks.length; i++) { cks[i].checked = true; } };
|
全不选按钮的点击事件
1 2 3 4 5 6 7 8
| offBtn.onclick = function() { all1.checked = false; all2.checked = false; for (var i = 0; i < cks.length; i++) { cks[i].checked = false; } };
|
每一子选项的点击事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| for (let i = 0; i < cks.length; i++) { cks[i].onclick = function() { flag = true; for (let k = 0; k < cks.length; k++) { if (!cks[k].checked) { flag = false; break; } } all1.checked = flag; all2.checked = flag; } }
|
整体思路就是这样了,其实就是最后一步难一点,也没什么了,自己整理一下也就会了
最后说一句,我的博客是 webldx.GgtHub.io