如何通过querySelector获取元素的最近前置name为checkthis的复选框

原代码中使用ev.target.querySelector()是错误的——这个方法只能查找当前元素的后代元素，而你需要找的是DOM中位于目标元素之前的元素（无论是否嵌套），所以完全不适用。

以下是两种可行的解决方案：

方案一：向前遍历DOM节点（性能优先） #

从目标元素出发，依次检查前置的所有节点（包括兄弟节点、父节点的兄弟节点及其后代），找到第一个符合条件的复选框就返回，避免不必要的遍历：

function findPreviousInputcheckboxCheckthis(ev) {
  let currentNode = ev.target.previousSibling;
  let parent = ev.target.parentNode;

  while (currentNode || parent) {
    if (currentNode) {
      // 仅处理元素节点
      if (currentNode.nodeType === Node.ELEMENT_NODE) {
        // 先检查当前节点是否是目标复选框
        if (currentNode.tagName === 'INPUT' && currentNode.type === 'checkbox' && currentNode.name === 'checkthis') {
          return currentNode;
        }
        // 再检查当前节点的后代中是否存在目标复选框
        const candidate = currentNode.querySelector('input[name="checkthis"][type="checkbox"]');
        if (candidate) {
          return candidate;
        }
      }
      // 继续向前查找兄弟节点
      currentNode = currentNode.previousSibling;
    } else {
      // 当前节点为空时，切换到父节点的前一个兄弟节点继续查找
      currentNode = parent.previousSibling;
      parent = parent.parentNode;
    }
  }
  // 未找到符合条件的元素时返回null
  return null;
}

方案二：筛选所有符合条件的复选框（简洁优先） #

先获取页面中所有name为checkthis的复选框，再筛选出位于目标元素之前的，最后一个就是最近的前置复选框：

function findPreviousInputcheckboxCheckthis(ev) {
  const target = ev.target;
  const allCheckboxes = document.querySelectorAll('input[name="checkthis"][type="checkbox"]');
  
  // 筛选出在目标元素之前的复选框
  const precedingCheckboxes = Array.from(allCheckboxes).filter(checkbox => 
    checkbox.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING
  );
  
  // 返回最近的前置复选框，无匹配则返回null
  return precedingCheckboxes.pop() || null;
}

补充说明 #

• 方案一适合DOM结构复杂、节点数量多的场景，因为它找到目标后立即终止遍历，性能更优。
• 方案二代码简洁易读，适合DOM节点数量较少的场景。
• 原代码存在语法错误：querySelector( "input[name='checkthis']); 缺少闭合双引号，正确写法为querySelector("input[name='checkthis']")，但该方法本身不符合你的需求。

内容的提问来源于stack exchange，提问作者Bill2022