JQ实现表格全选、反选功能
- 2019 年 12 月 27 日
- 筆記
下面代码是使用JQ，实现表格列表的全选和反选功能，实际较为简单，主要做为教学使用：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>表格全选 </title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/> </head> <body> <div class="container"> <div class="row"> <table class="table table-hover table-bordered"> <tbody> <tr> <td>选择状态</td> <td>产品序号</td> <td>产品名称</td> <td>库存</td> <td>存放地</td> </tr> <tr> <td> <input type="checkbox" name="Alone" class="input-group td-list"/> </td> <td>1</td> <td>大米</td> <td>2000</td> <td>盘锦</td> </tr> <tr> <td> <input type="checkbox" name="Alone" class="input-group td-list"/> </td> <td>2</td> <td>玉米</td> <td>3232</td> <td>沈阳</td> </tr> <tr> <td> <input type="checkbox" name="Alone" class="input-group td-list"/> </td> <td>3</td> <td>猪肉</td> <td>23232323</td> <td>新民冷库</td> </tr> </tbody> </table> <div class="btn-group"> <input type="checkbox" class="form-control" id="all">全选 <input type="checkbox" class="form-control" id="reverse_election">全选 </div> </div> </div> <script src="bootstrap/js/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> <script> $("#all").click(function () { var status = $(this).is(":checked"); $(".td-list").prop("checked", status); }); $("#reverse_election").click(function () { //更改成全选状态 $(".td-list:checkbox").each(function () { //遍历所有复选框，然后取值进行 !非操作 $(this).prop("checked", !$(this).prop("checked")); }) }); </script> </html>
