<!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.6; z-index:9; } .c2{ width:500px; height:400px; background-color:white; position:fixed; left:50%; top:50%; margin-left:-250px; margin-top:-200px; 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="CancleAll();" /> <input type="button" value="反选" onclick="ReverseAll();" /> <table> <thead> <tr> <th>选择</th> <th>学生</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>光头强</td> <td>大熊</td> <td>小熊</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>蓝精灵</td> <td>黑猫警长</td> <td>迪迦</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>孙悟空</td> <td>猪八戒</td> <td>沙和尚</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 tr_list = tbody.children; for (var i = 0; i < tr_list.length; i++) { var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancleAll(){ var tbody=document.getElementById("tb"); var tr_list=tbody.children; for(var i=0;i<tr_list.length;i++){ var current_tr=tr_list[i]; var checkbox=current_tr.children[0].children[0]; checkbox.checked=false; } } function ReverseAll(){ var tbody=document.getElementById("tb"); var tr_list=tbody.children; for(var i=0;i<tr_list.length;i++){ var current_tr=tr_list[i]; var checkbox=current_tr.children[0].children[0]; if(checkbox.checked){ checkbox.checked=false; }else{ checkbox.checked=true; } } } </script> </body> </html>