<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #cover{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 99; } #model { position: absolute; width: 400px; height: 200px; margin-top:-100px ; margin-left: -200px; left: 50%; top: 50%; z-index: 100; background: white; } .hide { display: none; } </style> </head> <body> <div id="cover" class="hide usrtag"></div> <div id="model" class="hide usrtag"> <label> 用户: <input id='name' type="text"> </label> <hr> <label> 密码: <input id="hobby" type="text"> </label> <hr> <button id="send">提交</button> <button id="back">取消</button> </div> <button class="selectAll">全选</button> <button class="reverse">反选</button> <button class="cancell">取消</button> <button class="add">新增</button> <table border="1px"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tr> <td><input class="i1" type="checkbox"></td> <td>景女神</td> <td>茶道</td> <td><button class="hire">开除</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>金老板</td> <td>开车</td> <td><button class="hire">开除</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>苑局</td> <td>不洗头</td> <td><button class="hire">开除</button></td> </tr> </table> <script src="jquery-3.3.1.js"></script> <script> // 全选按钮绑定事件将所有input标签设置选定 $('.selectAll').click(function () { $("input").prop('checked',true); }); //反算按钮绑定点击事件，并租个判断checked属性并反转 $('.reverse').click(function () { let $obj=$('input'); for(let i=0;i<$obj.length;i++) { let state = $($obj[i]).prop('checked'); $($obj[i]).prop('checked',!state); } }); //取消按钮绑定点击事件，并将所有的checked属性取消 $('.cancell').click(function () { $("input").prop('checked',false); }); $('.hire').click(function () { $(this).parent().parent().remove() }); $('.add').click(function () { $('.usrtag').removeClass('hide') }); $('#back').click(function () { $('.usrtag').addClass('hide') }); $('#send').click(function () { let name=$('#name').val(); let pwd=$('#hobby').val(); }) </script> </body> </html> 