书写一个后台管理中用到的全选反选功能。代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选插件</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="container"> <div class="row6"> <table class="table table-bordered"> <thead> <tr> <th style="250px;"> <button type="button" class="btn btn-success" id="check_all">全选</button> <button type="button" class="btn btn-danger" id="check_others">反选</button> </th> <th>ID</th> <th>name</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="son_checkbox" ></td> <td>1</td> <td>张三</td> </tr> <tr> <td><input type="checkbox" class="son_checkbox" ></td> <td>2</td> <td>李四</td> </tr> <tr> <td><input type="checkbox" class="son_checkbox" ></td> <td>3</td> <td>王五</td> </tr> <tr> <td><input type="checkbox" class="son_checkbox" ></td> <td>4</td> <td>赵六</td> </tr> </tbody> </table> </div> </div> <script> $(function(){ //点击全选事件 $("#check_all").click(function(){ var text=$(this).text(); var status; if(text=="全选") { status=true; text="取消全选"; } else if(text=="取消全选") { status=false; text="全选"; }else { return false; } $(".son_checkbox").prop("checked",status);//改变状态 $(this).text(text);//设置文字 }); //点击反选事件 $("#check_others").click(function(){ //遍历所有选择框 然后反转状态 $(".son_checkbox").each(function(){ var now_status=$(this).prop("checked");//获取当前选择框是否选中 now_status=!now_status;//反转状态 $(this).prop("checked",now_status);//重新绑定状态 }); }); }); </script> </body> </html>
效果图如下：
