寫一個獲取頁面中所有checkbox的方法

王铁柱6發表於2024-12-06

獲取頁面中所有 checkbox 的方法有很多種，以下列出幾種常見且實用的方法，並解釋其優缺點：

1. 使用 querySelectorAll (推薦)

const checkboxes = document.querySelectorAll('input[type="checkbox"]');

// 將 NodeList 轉換為陣列，以便使用陣列方法
const checkboxArray = Array.from(checkboxes); 

checkboxArray.forEach(checkbox => {
  //  對每個 checkbox 進行操作，例如：
  console.log(checkbox.checked); // 獲取 checkbox 的選中狀態
});
  • 優點: 簡潔、高效、現代瀏覽器都支援。querySelectorAll 返回的是一個靜態的 NodeList，這意味著即使 DOM 更新，NodeList 也不會改變，避免了一些潛在的效能問題。
  • 缺點: IE8 以下不支援。

2. 使用 getElementsByTagName

const inputs = document.getElementsByTagName('input');
const checkboxes = [];

for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].type === 'checkbox') {
    checkboxes.push(inputs[i]);
  }
}

checkboxes.forEach(checkbox => {
  // 對每個 checkbox 進行操作
});
  • 優點: 相容性好，即使是舊版瀏覽器也支援。
  • 缺點: 效率略低於 querySelectorAll，需要遍歷所有 input 元素。返回的是一個動態的 HTMLCollection，這意味著如果 DOM 更新，HTMLCollection 也會隨之改變，需要注意潛在的效能問題和無限迴圈的風險。

3. 使用特定框架/庫 (例如 jQuery)

如果你的專案使用了類似 jQuery 的庫，可以使用其提供的選擇器方法：

// jQuery
const checkboxes = $('input[type="checkbox"]');

checkboxes.each(function() {
  //  對每個 checkbox 進行操作，例如：
  console.log($(this).is(':checked')); // 獲取 checkbox 的選中狀態
});
  • 優點: 如果已經使用了框架/庫，則程式碼更簡潔。
  • 缺點: 依賴於特定的框架/庫。

4. 遞迴查詢 (適用於複雜場景)

如果 checkbox 巢狀在複雜的元件或 shadow DOM 中，可以使用遞迴查詢：

function getAllCheckboxes(element) {
  const checkboxes = [];
  const elements = element.querySelectorAll('*'); // 獲取所有後代元素

  for (let i = 0; i < elements.length; i++) {
    if (elements[i].type === 'checkbox') {
      checkboxes.push(elements[i]);
    }

    // 遞迴查詢子元素
    checkboxes.push(...getAllCheckboxes(elements[i])); 
  }

  return checkboxes;
}

const allCheckboxes = getAllCheckboxes(document.body); // 從 body 開始查詢
  • 優點: 可以處理複雜的巢狀結構，包括 shadow DOM。
  • 缺點: 實現較為複雜，效能消耗可能較大，需要謹慎使用。

選擇哪種方法取決於你的具體需求和專案環境。對於大多數情況，querySelectorAll 是首選方案，因為它簡潔、高效且相容性良好。 如果需要相容非常老的瀏覽器，可以考慮使用 getElementsByTagName。 如果專案已經使用了框架/庫，則可以使用框架/庫提供的方法。 對於複雜的巢狀結構，可以考慮使用遞迴查詢。

相關文章