首页 > 代码库 > jquery 书写全选反选功能
jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能。代码如下
<!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="width: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>
效果图如下：
jquery 书写全选反选功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。