怎么使用JavaScript實現全選功能

本篇內容主要講解“怎么使用JavaScript實現全選功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么使用JavaScript實現全選功能”吧!

一、HTML代碼

在實現全選和取消全選功能之前，我們需要先寫好HTML代碼。下面是一個示例的HTML代碼，包括表格頭部和內容：

<div class="tableContainer">
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="selectAll"/>全選</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>張三</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>李四</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>王五</td>
        <td>30</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>
</div>

在表格頭部，我們添加了一個全選的checkbox，設置其id為“selectAll”，其他行中每一行的第一個單元格中也添加了一個checkbox，設置其class為“checkbox”。

二、JavaScript代碼

接下來，我們需要編寫JavaScript代碼來實現我們的功能。我們需要為表格頭部的全選checkbox和每一行的checkbox添加事件，實現全選和取消全選的功能。以下是JavaScript代碼：

<script>
  // 獲取表格頭部的全選checkbox
  var selectAll = document.getElementById("selectAll");
  // 獲取每一行中的checkbox
  var checkboxes = document.getElementsByClassName("checkbox");
 
  // 給表格頭部的全選checkbox綁定點擊事件
  selectAll.onclick = function() {
    // 循環遍歷每一行的checkbox
    for(var i=0; i < checkboxes.length; i++) {
      // 將每一行的checkbox的選中狀態設置為表格頭部的全選checkbox的選中狀態
      checkboxes[i].checked = selectAll.checked;
    }
  }
 
  // 循環遍歷每一行的checkbox
  for(var i=0; i < checkboxes.length; i++) {
    // 給每一個checkbox綁定點擊事件
    checkboxes[i].onclick = function() {
      // 定義一個變量，表示是否所有行中的checkbox都被選中
      var isCheckedAll = true;
      // 循環遍歷每一行的checkbox
      for(var j=0; j < checkboxes.length; j++) {
        // 如果有一個checkbox沒有被選中，將isCheckedAll設置為false
        if(!checkboxes[j].checked) {
          isCheckedAll = false;
          break;
        }
      }
      // 將表格頭部的全選checkbox的選中狀態設置為isCheckedAll
      selectAll.checked = isCheckedAll;
    }
  }
</script>

三、實現效果

在HTML和JavaScript代碼都完成后，我們就可以實現全選和取消全選的功能了。

當用戶勾選表格頭部的全選checkbox時，所有行中的checkbox都會被自動勾選上：

當用戶取消勾選表格頭部的全選checkbox時，所有行中的checkbox都會被自動取消勾選：

而當用戶勾選或取消勾選某一行的checkbox時，表格頭部的全選checkbox會根據所有行中的checkbox的勾選狀態自動勾選或取消勾選：

到此，相信大家對“怎么使用JavaScript實現全選功能”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！