写一个获取页面中所有checkbox的方法

获取页面中所有 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。 如果项目已经使用了框架/库，则可以使用框架/库提供的方法。 对于复杂的嵌套结构，可以考虑使用递归查找。