<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.4; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; z-index: 10; margin-top: -200px; margin-left: -250px } </style> </head> <body style="margin: 0"> <div> <input type="button" value="添加" onclick="ShowModel();"/> <input type="button" value="全选" onclick="ChooseAll();"/> <input type="button" value="取消" onclick="CancleAll();"/> <input type="button" value="反选" onclick="Reverse();"/> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> <th>IP</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"></td> <td>hehe</td> <td>90</td> <td>10.192.17.20</td> </tr> <tr> <td><input type="checkbox"></td> <td>haha</td> <td>2375</td> <td>10.192.17.21</td> </tr> <tr> <td><input type="checkbox"></td> <td>gaga</td> <td>6379</td> <td>10.192.17.22</td> </tr> </tbody> </table> </div> <!-- 遮罩层start--> <div id="i1" class="c1 hide"> </div> <!-- 遮罩层end--> <!--弹出框--> <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> //弹框的显示和隐藏ShowModel、HideModel 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() { //获取所有的tr var tbody = document.getElementById('tb'); var tr_list = tbody.children; //循环所有的tr,current_tr for (var i = 0; i < tr_list.length; i++) { var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; // 给checkbox设置为true就代表勾选，false就代表取消 checkbox.checked = true; } } //取消全选 function CancleAll() { //获取所有的tr var tbody = document.getElementById('tb'); var tr_list = tbody.children; //循环所有的tr,current_tr for (var i = 0; i < tr_list.length; i++) { var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; // 给checkbox设置为true就代表勾选，false就代表取消 checkbox.checked = false; } } //反选 function Reverse() { //获取所有的tr var tbody = document.getElementById('tb'); var tr_list = tbody.children; //循环所有的tr,current_tr for (var i = 0; i < tr_list.length; i++) { var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; // 给checkbox设置为true就代表勾选，false就代表取消 /* 第一种和第二种都可以都能实现反选 if (checkbox.checked){ checkbox.checked=false; } else { checkbox.checked=true; }*/ checkbox.checked = ! checkbox.checked; } } </script> </body> </html>