JavaScript基础(8.全选取消实例)
2017-12-13 18:30
351 查看
接上上次的实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide { display: none; } .c1 { position: fixed; left: 0; top: 0; bottom: 0; right: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2 { width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -300px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();"/> <input type="button" value="全选" onclick="ChooseAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反选" onclick="ReverseAll();"/> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"/></td> <td>1.1.1.1</td> <td>90</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.2</td> <td>91</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.3</td> <td>92</td> </tr> </tbody> </table> </div> <!--遮罩层开始--> <div id="i1" class="c1 hide"></div> <!--遮罩层结束--> <!--弹出框开始--> <div id="i2" class="c2 hide"> <p><input type="text"/></p> <p><input type="text"/></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="确定"/> </p> </div> <!--弹出框结束--> <script> function ShowModel() { document.getElementById("i1").classList.remove("hide"); document.getElementById("i2").classList.remove("hide"); } function HideModel() { document.getElementById("i1").classList.add("hide"); document.getElementById("i2").classList.add("hide"); } function ChooseAll() { var tbody = document.getElementById("tb"); var tb_list = tbody.children; for (var i = 0; i < tb_list.length; i++) { var current_tr = tb_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancelAll() { var tbody = document.getElementById("tb"); var tb_list = tbody.children; for (var i = 0; i < tb_list.length; i++) { var current_tr = tb_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll() { var tbody = document.getElementById("tb"); var tb_list = tbody.children; for (var i = 0; i < tb_list.length; i++) { var current_tr = tb_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){ checkbox.checked = false; }else{ checkbox.checked = true; } } } </script> </body> </html> 效果如下: 点击全选反选取消就是相应的效果:
相关文章推荐
- javascript基础实例教程(一)
- javascript基础知识之html5轮播图实例讲解(44)
- Javascript 控制 CheckBox 的全选与取消全选
- JavaScript之全选/反选/取消,for循环闭包
- JavaScript实现单击全选 ,再次点击取消全选
- JavaScript基础 text文本框获得焦点时,其中的内容被全选 this.select()
- JS基础学习第六天:JavaScript对象入门(构造函数和实例对象)
- JavaScript全选与取消全选
- ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
- javascript事件的绑定基础实例讲解(34)
- javascript基础实例教程(二)
- 如何利用jquery实现一句话全选/取消全选的实例代码
- 由浅入深JavaScript9基础-Dom综合实例1
- JavaScript - CheckBox 全选与取消全选
- JavaScript基础 text文本框获得焦点时,其中的内容被全选 this.select()
- GridView全选,反选,取消编辑,删除,JavaScript控制
- javascript基础实例教程(三)
- Javascript 控制 CheckBox 的全选与取消全选
- javascript实现全选反选取消所选
- javascript, jquery实现checkbox全选,反选,取消选择