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>